<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>css3 | 李世龙</title><meta name="keywords" content="css"><meta name="author" content="lee"><meta name="copyright" content="lee"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="css基础及新增语法">
<meta property="og:type" content="article">
<meta property="og:title" content="css3">
<meta property="og:url" content="http://blog.cai2.wang/2021/11/19/Done/css3/index.html">
<meta property="og:site_name" content="李世龙">
<meta property="og:description" content="css基础及新增语法">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_cloud_hosting_aodd.png">
<meta property="article:published_time" content="2021-11-19T14:09:47.000Z">
<meta property="article:modified_time" content="2022-08-23T11:30:25.571Z">
<meta property="article:author" content="lee">
<meta property="article:tag" content="css">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_cloud_hosting_aodd.png"><link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/avatar.jpg"><link rel="canonical" href="http://blog.cai2.wang/2021/11/19/Done/css3/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":200},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"bottom-left"},
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: true,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'css3',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2022-08-23 19:30:25'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const fontSizeVal = saveToLocal.get('global-font-size')
    if (fontSizeVal !== undefined) {
      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
    }
    })(window)</script><link rel="stylesheet" href="/css/iconfont.css"><link rel="stylesheet" href="/css/index.min.css"><link rel="stylesheet" href="/css/bg.css"><meta name="generator" content="Hexo 5.4.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/avatar.jpg" onerror="onerror=null;src='https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">13</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">9</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">8</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/video/"><i class="fa-fw fas fa-video"></i><span> 视频</span></a></li><li><a class="site-page child" href="/love/"><i class="fa-fw fa fa-heartbeat"></i><span> 心动</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/my/"><i class="fa-fw fas fa-ad"></i><span> 我的</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-seedling"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="not-top-img" id="page-header"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">李世龙</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/video/"><i class="fa-fw fas fa-video"></i><span> 视频</span></a></li><li><a class="site-page child" href="/love/"><i class="fa-fw fa fa-heartbeat"></i><span> 心动</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/my/"><i class="fa-fw fas fa-ad"></i><span> 我的</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-seedling"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav></header><main class="layout" id="content-inner"><div id="post"><div id="post-info"><h1 class="post-title">css3</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-11-19T14:09:47.000Z" title="发表于 2021-11-19 22:09:47">2021-11-19</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-08-23T11:30:25.571Z" title="更新于 2022-08-23 19:30:25">2022-08-23</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/css/">css</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">20.9k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>86分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="css3"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div><article class="post-content" id="article-container"><h1 id="1-CSS-网页的美容师"><a href="#1-CSS-网页的美容师" class="headerlink" title="1, CSS - 网页的美容师"></a>1, CSS - 网页的美容师</h1><p><strong>Cascading Style Sheet 层叠样式表</strong></p>
<p>CSS 也是一种标记语言</p>
<p><strong>作用 : 美化网页 , 设置HTML的文本样式 , 图片的外形 , 版面的布局</strong></p>
<h1 id="2-CSS语法规范"><a href="#2-CSS语法规范" class="headerlink" title="2, CSS语法规范"></a>2, CSS语法规范</h1><p><strong>CSS样式代码由两部分组成 , 选择器以及一条或者多条声明 (声明内容就是属性)</strong></p>
<p><strong>语法 :</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">选择器 &#123;</span><br><span class="line">    属性<span class="number">1</span>: 属性值;</span><br><span class="line">    属性<span class="number">2</span>: 属性值;</span><br><span class="line">    .........</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="comment">/* p 代表着选中本HTML文档中所有的 p 标签*/</span></span></span><br><span class="line"><span class="css">    <span class="selector-tag">p</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="comment">/* 将所有的p标签中的文字变为红色 */</span></span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: red;</span></span><br><span class="line"><span class="css">        <span class="comment">/* 将所有p标签中的文字变为30像素 */</span></span></span><br><span class="line"><span class="css">        <span class="attribute">font-size</span>: <span class="number">30px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>我是第1个p标签<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>我是第2个p标签<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>我是第3个p标签<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>我是第4个p标签<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>我是第5个p标签<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211014135308211.png" alt="image-20211014135308211" style="zoom:50%;border: solid" />    

<p><strong>注意点 :</strong></p>
<ul>
<li><strong>选择器</strong> 用于指定 CSS 的给对应的HTML标签 , 花括号中对应是设置的样式 (颜色 , 大小 , 边框…)</li>
<li>属性和属性值以键值对的形式出现 , ==属性名: “属性值”== , 左边是名称 , 右边是匹配的属性值</li>
<li>属性和属性值之间使用英文的 “:” 进行间隔</li>
<li>多个属性用 “;” 分号进行间隔</li>
</ul>
<h1 id="3-CSS写法规范"><a href="#3-CSS写法规范" class="headerlink" title="3, CSS写法规范"></a>3, CSS写法规范</h1><ol>
<li><p>样式的书写风格</p>
<p><strong>展开式</strong> 的写法 , 每个属性独占一行</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">选择器 &#123;</span><br><span class="line">    属性<span class="number">1</span>: 属性值;</span><br><span class="line">    属性<span class="number">2</span>: 属性值;</span><br><span class="line">    .........</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>CSS 代码统一使用英文小写形式 , 除特殊情况</p>
</li>
<li><p>空格的规范</p>
<p>①属性值前面，冒号的后面</p>
<p>②选择器和大括号之间保留一个空格的距离</p>
</li>
</ol>
<h1 id="4-CSS-基本选择器"><a href="#4-CSS-基本选择器" class="headerlink" title="4, CSS 基本选择器"></a>4, CSS 基本选择器</h1><h2 id="4-1-选择器的分类"><a href="#4-1-选择器的分类" class="headerlink" title="4,1 选择器的分类"></a>4,1 选择器的分类</h2><p><strong>选择器</strong> 分为 <strong>基础选择器</strong> 和 <strong>复合选择器</strong> 两大类</p>
<ul>
<li>基础选择器 : 有单个选择器组成</li>
<li>基础选择器 : <strong>标签选择器 , 类选择器 , id选择器 , 通配符选择器</strong></li>
</ul>
<h2 id="4-2-标签选择器"><a href="#4-2-标签选择器" class="headerlink" title="4,2 标签选择器"></a>4,2 标签选择器</h2><p>标签选择器 (元素选择器) 是有 <strong>HTML标签名称</strong> 作为选择器 , 按照表签名分类</p>
<p>作用 : 为页面中某一类标签指定统一的 CSS 样式</p>
<p>优点 : 可以快速的为页面中同类型标签选择统一的样式</p>
<p>缺点 : 无法进行<strong>差异设计</strong></p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-tag">p</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: blue;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">div</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: red;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 要求将所有男生变为蓝色,女生变为红色 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>男生<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>男生<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>男生<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>女生<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>女生<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>女生<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/CSS.assets/image-20211014140820504.png" alt="image-20211014140820504" style="zoom:50%;border: solid" />    



<h2 id="4-3-类选择器"><a href="#4-3-类选择器" class="headerlink" title="4,3 类选择器"></a>4,3 类选择器</h2><p>若果想要实现差异设计 , 选中一个或者多个元素 , 可以使用类选择器</p>
<p><strong>类选择器</strong> 在HTML 标签中以 <strong>class</strong> 属性定义 , 在CSS中 , 类选择器以英文的句号表示 “.”</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.a</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: red;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.info-data</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: blue;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 将两个标签中的内容给为红色 --&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 代表将a类选择中的样式添加到当前的标签中 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;a&quot;</span>&gt;</span></span><br><span class="line">    div标签: 测试类选择器</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;info-data&quot;</span>&gt;</span></span><br><span class="line">    div标签: 测试类选择器</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;a&quot;</span>&gt;</span></span><br><span class="line">    p标签: 测试类选择器</span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/CSS.assets/image-20211014142014095.png" alt="image-20211014142014095" style="zoom:50%;" />        



<p>**注意点 : **</p>
<ol>
<li>类选择器使用 “.” 进行表示 , “.” 后紧跟类名称 (类名自定义)</li>
<li>长名称或者是词组组成的可以使用中横线进行间隔</li>
<li>不可以使用数字 , 中文 , 使用英文的小写字母对类名称进行命名</li>
<li>命名要做到 “见名知意”</li>
</ol>
<ul>
<li><p><strong>类选择器多类名的写法</strong></p>
<p>需求 : 网页中需要三中不同颜色的盒子</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.aa</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bb</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: green;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.cc</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: blue;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>三中不同颜色的盒子<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;aa box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;bb box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;cc box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>注意点 :</strong></p>
<ol>
<li>多个类名称中间使用空格间隔</li>
<li>一个标签中可以同时拥有两个类选择器中的样式属性</li>
</ol>
<p><strong>使用的优势 :</strong></p>
<ul>
<li>可以加个一写相同的样式抽取出来放到一个类中</li>
<li>这些可以调用的这个共有样式的类 , 然后调用自己独有的类</li>
<li>从而节省 CSS 代码 , 统一修改很方便</li>
</ul>
</li>
</ul>
<h2 id="4-4-id选择器"><a href="#4-4-id选择器" class="headerlink" title="4,4 id选择器"></a>4,4 id选择器</h2><p>作用 : 可以为标有特定 ID 的标签指定特定的样式</p>
<p>HTML 元素通过 <strong>id</strong> 属性来设置 <strong>id 选择器</strong> , CSS 中 <strong>id选择器</strong> 使用 “#” 表示</p>
<p><strong>注意 :</strong></p>
<ol>
<li><strong>id 属性不可重复命名 , 一个HTML中只能有一个</strong></li>
<li>**id 属性在HTML中重复不会报错 , 但是 JS 通过id属性访问元素的时候回出现问题 **</li>
</ol>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#tst</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: deeppink;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;tst&quot;</span>&gt;</span></span><br><span class="line">    div标签: 测试id选择器,di属性值为tst</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/CSS.assets/image-20211014145327189.png" alt="image-20211014145327189" style="zoom:50%;" />    



<h2 id="4-5-通配符-全局选择器"><a href="#4-5-通配符-全局选择器" class="headerlink" title="4,5 通配符 / 全局选择器"></a>4,5 通配符 / 全局选择器</h2><p>在 CSS 中 , 通配符选择器使用 <strong>“*”</strong></p>
<p>作用 : 选中页面中所有的标签 , 指定统一的样式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    * &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: blue;</span></span><br><span class="line"><span class="css">        <span class="attribute">font-size</span>: <span class="number">30px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>我是一个3级标题<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>我是一个p标签<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>我是一个 div 标签<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>我是一个span标签<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ul中的li标签<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/CSS.assets/image-20211014150119418.png" alt="image-20211014150119418" style="zoom:50%;border: solid" />    

<p>==作用 : 用于清楚浏览器为标签指定的默认样式 , 内外边距==</p>
<h1 id="5-CSS字体相关属性"><a href="#5-CSS字体相关属性" class="headerlink" title="5, CSS字体相关属性"></a>5, CSS字体相关属性</h1><p>CSS Fonts相关的属性用于定义字体的 大小 , 粗细 , 文字样式</p>
<h2 id="5-1-文字属性的使用"><a href="#5-1-文字属性的使用" class="headerlink" title="5,1 文字属性的使用"></a>5,1 文字属性的使用</h2><ul>
<li><p><strong>font-family : 字体系列</strong></p>
<p>属性值可以有多个 , 为了保证网页的兼容性 , 因为用户的电脑中的字体无法确定</p>
<p>如果是过个属性值 , 用 “,” 间隔 , 多个单词的字体使用一号包括</p>
<p>==尽量使用系统自带的字体==</p>
</li>
<li><p><strong>font-size : 字体大小</strong></p>
<p>属性值为像素值 , 单位 px , 谷歌浏览器默认 16px</p>
</li>
<li><p><strong>font-weight : 字体加粗</strong></p>
<ul>
<li>bold : 字体加粗 , 可以使用数字 700 表示</li>
<li>normal : 字体正常 , 可以使用数字 400 表示</li>
</ul>
</li>
<li><p><strong>font-style : 字体样式 (斜体)</strong></p>
<ul>
<li>italic : 字体斜体</li>
<li>normal : 正常字体</li>
</ul>
</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.aa</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">font-family</span>: <span class="string">&#x27;microsoft yahei&#x27;</span>,<span class="string">&quot;黑体&quot;</span>,<span class="string">&quot;楷体&quot;</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">font-size</span>: <span class="number">50px</span>;</span></span><br><span class="line"><span class="css">        <span class="comment">/*</span></span></span><br><span class="line"><span class="comment"><span class="css">        属性值: bold字体加粗</span></span></span><br><span class="line"><span class="comment"><span class="css">        normal 正常的文字效果,不加粗</span></span></span><br><span class="line"><span class="comment"><span class="css">        属性值数字: 700 为加粗,其后不要有单位</span></span></span><br><span class="line"><span class="comment"><span class="css">        400 等同于normal</span></span></span><br><span class="line"><span class="comment"><span class="css">        */</span></span></span><br><span class="line"><span class="css">        <span class="attribute">font-weight</span>: <span class="number">700</span>;</span></span><br><span class="line"><span class="css">        <span class="comment">/*</span></span></span><br><span class="line"><span class="comment"><span class="css">        设置文本样式斜体</span></span></span><br><span class="line"><span class="comment"><span class="css">        属性值: italic,字体斜体</span></span></span><br><span class="line"><span class="comment"><span class="css">        normal, 正常字体</span></span></span><br><span class="line"><span class="comment"><span class="css">        */</span></span></span><br><span class="line"><span class="css">        <span class="attribute">font-style</span>: italic;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;aa&quot;</span>&gt;</span></span><br><span class="line">    我是div标签用于测试文字样式属性</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="5-2-文字属性的复合写法"><a href="#5-2-文字属性的复合写法" class="headerlink" title="5,2 文字属性的复合写法"></a>5,2 文字属性的复合写法</h2><p><strong>语法 :</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">选择器名 &#123;</span><br><span class="line">    <span class="attribute">font</span>: font-style font-weight font-size/line-height font-family;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p> <strong>line-height : 行高</strong></p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#font-total</span> &#123;</span><br><span class="line">    <span class="comment">/* 设置字体,斜体,加粗,大小为35像素,行高50px,字体样式楷体 */</span></span><br><span class="line">    <span class="attribute">font</span>: italic <span class="number">700</span> <span class="number">35px</span>/<span class="number">100px</span> <span class="string">&#x27;楷体&#x27;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;font-total&quot;</span>&gt;</span></span><br><span class="line">    羌笛何须怨杨柳,春风不度玉门关.</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/CSS.assets/image-20211014153034966.png" alt="image-20211014153034966" style="zoom:60%;" />    

<ul>
<li><strong>复合属性使用的注意事项</strong><ul>
<li>使用 font 属性的时候 , 一定要按照规定的顺序进行编写 , 不可更改 , 每个属性使用空格隔开</li>
<li>==不需要的属性可以省略 , 会取默认值 , 但是必须保留 <strong>font-size</strong> 和 <strong>font-family</strong> , 否则 font 属性将失效==</li>
</ul>
</li>
</ul>
<h1 id="6-CSS文本属性"><a href="#6-CSS文本属性" class="headerlink" title="6, CSS文本属性"></a>6, CSS文本属性</h1><p>作用用于定义文字的外观 , 字体颜色 , 对其方式 , 文本缩进 , 行间距</p>
<h2 id="6-1-文字颜色"><a href="#6-1-文字颜色" class="headerlink" title="6,1 文字颜色"></a>6,1 文字颜色</h2><p><strong>color</strong> 属性</p>
<p>三种取色的方式</p>
<ul>
<li>英文单词 : green , blue ,red ….</li>
<li>16进制 : 由 # + 6位数字或英文单词的组合组成</li>
<li>rgb取色法 : rgb( 150,100 ,100 ) , ()中有三个数字的参数</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;color-word&quot;</span>&gt;</span></span><br><span class="line">    英文单词形式的color属性值</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;color-hex&quot;</span>&gt;</span></span><br><span class="line">    16进制形式的color属性值</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;color-rgb&quot;</span>&gt;</span></span><br><span class="line">    rgb取色形式的color属性值</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.color-word</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: blueviolet;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color-hex</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#416fab</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.color-rgb</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(<span class="number">150</span>,<span class="number">100</span>,<span class="number">100</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/CSS.assets/image-20211014155615468.png" alt="image-20211014155615468" style="zoom:50%;" />    

<p><strong>在实际开发中 16 进制是最长使用的方式</strong></p>
<h2 id="6-2-文字对齐方式"><a href="#6-2-文字对齐方式" class="headerlink" title="6,2 文字对齐方式"></a>6,2 文字对齐方式</h2><p>属性 : <strong>text-align</strong></p>
<p>属性值 :</p>
<ul>
<li>left : 文字居左 ( ==默认== )</li>
<li>right : 文字居右</li>
<li>center : 文字居中</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.align-left</span> &#123;</span><br><span class="line">    <span class="attribute">text-align</span>: left;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.align-center</span> &#123;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.align-right</span> &#123;</span><br><span class="line">    <span class="attribute">text-align</span>: right;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;align-left&quot;</span>&gt;</span></span><br><span class="line">    我是测试文字,测试文字对其方式</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;align-center&quot;</span>&gt;</span></span><br><span class="line">    我是测试文字,测试文字对其方式</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;align-right&quot;</span>&gt;</span></span><br><span class="line">    我是测试文字,测试文字对其方式</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/CSS.assets/image-20211014160206438.png" alt="image-20211014160206438" style="zoom:80%;border: solid" />





<h2 id="6-3-装饰文本"><a href="#6-3-装饰文本" class="headerlink" title="6,3 装饰文本"></a>6,3 装饰文本</h2><p>属性 : <strong>text-decoration</strong></p>
<p>属性值 : </p>
<ul>
<li>**none : **默认值 , 没有装饰 (最常用)</li>
<li>**underline : **下划线 , 浏览器中所有的 a 标签默认都有下滑线</li>
<li>**overline : **上划线 (几乎不用)</li>
<li>**line-throught : **中横线,删除线 </li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.none</span> &#123;</span><br><span class="line">    <span class="attribute">text-decoration</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.underline</span> &#123;</span><br><span class="line">    <span class="attribute">text-decoration</span>: underline;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.overline</span> &#123;</span><br><span class="line">    <span class="attribute">text-decoration</span>: overline;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.line-throught</span> &#123;</span><br><span class="line">    <span class="attribute">text-decoration</span>: line-through;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#&quot;</span> <span class="attr">class</span>=<span class="string">&quot;none&quot;</span>&gt;</span>我是一个没有下滑线的超链接<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;underline&quot;</span>&gt;</span></span><br><span class="line">    我是div标签,我的文字是有下划线的</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;line-throught&quot;</span>&gt;</span></span><br><span class="line">    我是div标签,我的文字有删除线</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;overline&quot;</span>&gt;</span></span><br><span class="line">    我是div标签,我的文字有上划线</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/CSS.assets/image-20211014161506518.png" alt="image-20211014161506518" style="zoom:50%;border: solid" />    



<h2 id="6-4-文本缩进"><a href="#6-4-文本缩进" class="headerlink" title="6,4 文本缩进"></a>6,4 文本缩进</h2><p>属性 : <strong>text-indent</strong></p>
<p>作用 : 设置段落的首行缩进的距离</p>
<p>属性值 : </p>
<ul>
<li>**px : **以传统的像素作为属性值</li>
<li>**em : **代表当前元素 1 个文字的大小 , 如果当前元素没有设置大小 , 会按照父元素的大小为基准</li>
</ul>
<p>==建议使用 em , 因为 em 可以灵活的根据元素文字的大小变化进行自适应的调整==</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;indent-px&quot;</span>&gt;</span></span><br><span class="line">    我是一个p标签,是一个段落我是一个p标签,是一个段落</span><br><span class="line">    我是一个p标签,是一个段落我是一个p标签,是一个段落</span><br><span class="line">    我是一个p标签,是一个段落我是一个p标签,是一个段落</span><br><span class="line">    我是一个p标签,是一个段落我是一个p标签,是一个段落</span><br><span class="line">    我是一个p标签,是一个段落我是一个p标签,是一个段落</span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;indent-em&quot;</span>&gt;</span></span><br><span class="line">    我是一个p标签,是一个段落我是一个p标签,是一个段落</span><br><span class="line">    我是一个p标签,是一个段落我是一个p标签,是一个段落</span><br><span class="line">    我是一个p标签,是一个段落我是一个p标签,是一个段落</span><br><span class="line">    我是一个p标签,是一个段落我是一个p标签,是一个段落</span><br><span class="line">    我是一个p标签,是一个段落我是一个p标签,是一个段落</span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.indent-px</span> &#123;</span><br><span class="line">    <span class="attribute">text-indent</span>: <span class="number">30px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.indent-em</span> &#123;</span><br><span class="line">    <span class="comment">/* 代表当前元素中2个字符大小的距离 */</span></span><br><span class="line">    <span class="attribute">text-indent</span>: <span class="number">2em</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/CSS.assets/image-20211014162834496.png" alt="image-20211014162834496"></p>
<h2 id="6-5-行间距"><a href="#6-5-行间距" class="headerlink" title="6,5 行间距"></a>6,5 行间距</h2><p>属性 : <strong>line-height</strong></p>
<p>作用 : 控制段落之间的间距 , 设置文本内容一行的高度</p>
<p>小技巧 : <strong>文字垂直居中 , 让文字的行高等于盒子的高度</strong></p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/CSS.assets/image-20211014164516763.png" alt="image-20211014164516763" style="zoom:67%;" />    



<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">&quot;lh&quot;</span>&gt;</span></span><br><span class="line">    我是一个p标签,是一个段落我是一个p标签,是一个段落</span><br><span class="line">    我是一个p标签,是一个段落我是一个p标签,是一个段落</span><br><span class="line">    我是一个p标签,是一个段落我是一个p标签,是一个段落</span><br><span class="line">    我是一个p标签,是一个段落我是一个p标签,是一个段落</span><br><span class="line">    我是一个p标签,是一个段落我是一个p标签,是一个段落</span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.lh</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">text-indent</span>: <span class="number">2em</span>;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/CSS.assets/image-20211014165702099.png" alt="image-20211014165702099" style="zoom:50%;" />    

<p><strong>文字垂直居中</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;text-middle&quot;</span>&gt;</span></span><br><span class="line">    我是div中的文字用于测试文字垂直居中的效果</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.text-middle</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#00ffff</span>;</span><br><span class="line">    <span class="comment">/* 指定行高何盒子的高度相同,就可以将文字挤到盒子中间 */</span></span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">300px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/CSS.assets/image-20211014165804705.png" alt="image-20211014165804705" style="zoom:50%;" />    





<h1 id="7-CSS的引入方式"><a href="#7-CSS的引入方式" class="headerlink" title="7, CSS的引入方式"></a>7, CSS的引入方式</h1><p>CSS 引入的方式分为三种</p>
<h2 id="7-1-行内样式-行内引入"><a href="#7-1-行内样式-行内引入" class="headerlink" title="7,1 行内样式 , 行内引入"></a>7,1 行内样式 , 行内引入</h2><p>写在 HTML 标签的 <strong>style</strong> 属性中 , 适用于简单的样式修改</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>行内样式, 行内引入<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 文字加粗,斜体,35px,楷体 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">&quot;font: italic 700 35px &#x27;楷体&#x27;;&quot;</span>&gt;</span></span><br><span class="line">    借问梅花何处落, 风吹一夜满关山.</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/CSS.assets/image-20211014170745748.png" alt="image-20211014170745748" style="zoom:50%;border: solid" />    

<p>==由于书写比较复杂 , 结构和样式没有分离 , 不推荐大量使用==    </p>
<h2 id="7-2-内部样式-嵌入式引入"><a href="#7-2-内部样式-嵌入式引入" class="headerlink" title="7,2 内部样式 , 嵌入式引入"></a>7,2 内部样式 , 嵌入式引入</h2><p>内部样式  (内嵌样式) : <strong>写在 HTML页面中 style 标签中 , style 标签写在 head 标签里</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.tst</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: coral;</span></span><br><span class="line"><span class="css">        <span class="attribute">font</span>: italic <span class="number">700</span> <span class="number">35px</span> <span class="string">&#x27;楷体&#x27;</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>style 标签可以出现在任何位置 , 但是一般情况下回写在 head 标签中</li>
</ul>
<h2 id="7-3-外部样式-链接式引入-外链式"><a href="#7-3-外部样式-链接式引入-外链式" class="headerlink" title="7,3 外部样式 , 链接式引入 , 外链式"></a>7,3 外部样式 , 链接式引入 , 外链式</h2><p>实际开发中最常使用的样式 , 适合用于大量样式的情况</p>
<p><strong>核心 : 样式单独写在 CSS 文件中 , 之后将 CSS 文件资源引入到对应的 HTML 文件中</strong></p>
<p><strong>外部引入分为两个步骤 :</strong></p>
<ol>
<li><p>在项目中的 CSS 文件夹中创建 以 .css 结尾的文件 , 编写 css 代码</p>
</li>
<li><p>在HTML页面中 , 使用 <strong>link</strong> 标签引入这个文件</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/CSS.assets/image-20211014171837082.png" alt="image-20211014171837082">    </p>
</li>
</ol>
<blockquote>
<p>代码实例</p>
</blockquote>
<p><strong>demo.css 中的代码</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#foreign</span> &#123;</span><br><span class="line">	<span class="attribute">font</span>: bold <span class="number">50px</span> <span class="string">&#x27;楷体&#x27;</span>;</span><br><span class="line">	<span class="attribute">color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><strong>html代码</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>外部样式, 链接式, 外链式<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;foreign&quot;</span>&gt;</span></span><br><span class="line">    醉卧沙场君莫笑,古来征战几人回.</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>link 标签</strong></p>
<p>rel : 定义引入资源与HTML文件的关系</p>
<p>href : 引入 CSS 代码资源的 URL</p>
<p>type : 引入资源的类型 , text/css css文档的代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span> <span class="attr">href</span>=<span class="string">&quot;css/demo.css&quot;</span>/&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/CSS.assets/image-20211014172007725.png" alt="image-20211014172007725" style="zoom:67%;border: solid" />    



<h1 id="8-Emmet-语法"><a href="#8-Emmet-语法" class="headerlink" title="8, Emmet 语法"></a>8, Emmet 语法</h1><h2 id="8-1-快速生成-HTML-结构"><a href="#8-1-快速生成-HTML-结构" class="headerlink" title="8,1 快速生成 HTML 结构"></a>8,1 快速生成 HTML 结构</h2><ol>
<li>快速生成标签: 写标签名按 tab 键 , 比如 : div + tab</li>
<li>生成多个相同标签使用 *</li>
<li>生成父子关系的标签: &gt;</li>
<li>快速生成同级关系的标签: +</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>快速生成HTML标签<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">div</span><br><span class="line">span</span><br><span class="line">form</span><br><span class="line">input</span><br><span class="line">img</span><br><span class="line">video</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>快速生成多个相同标签: *<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 10个div --&gt;</span></span><br><span class="line">div*10</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>快速生成父子关系的标签: &gt;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 有5个li的ol --&gt;</span></span><br><span class="line">ol&gt;li*5</span><br><span class="line"><span class="comment">&lt;!-- 快速生成一个表单 --&gt;</span></span><br><span class="line">form&gt;input*3</span><br><span class="line"><span class="comment">&lt;!-- 快速生成表格 --&gt;</span></span><br><span class="line">table&gt;tr*3&gt;td*3</span><br><span class="line">table&gt;(tr&gt;td*3)*3</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>快速生成同级关系的标签: +<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 3个span和5个div --&gt;</span></span><br><span class="line">span*3+div*5</span><br></pre></td></tr></table></figure>

<ol start="5">
<li>快速生成带有 class 和 id 属性的标签 : id 属性使用 “#” , class 属性使用 “.”</li>
<li>生成有顺序的标签: $</li>
<li>生成标签内容的: {}</li>
<li>快速生成标签以及属性: []</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>快速生成带有 class 和 id 属性的标签<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 生成 class 为 box的 div--&gt;</span></span><br><span class="line">div.box</span><br><span class="line"><span class="comment">&lt;!-- 生成 id 为 abc 的span --&gt;</span></span><br><span class="line">span#abc</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>生成有顺序的标签: $<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 生成class 属性值为box1~box10的div标签 --&gt;</span></span><br><span class="line">div.box$*10</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>生成标签内容的: &#123;&#125;<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">p&#123;我是测试文字,用于测试Emmet语法&#125;</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>快速生成标签以及属性: []<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 生成拥有 href 属性的a标签 --&gt;</span></span><br><span class="line">a[href]</span><br><span class="line"><span class="comment">&lt;!-- 快速生成表单 --&gt;</span></span><br><span class="line">form[action method=&quot;get&quot;]&gt;input[type=&quot;submit&quot;]</span><br></pre></td></tr></table></figure>





<h2 id="8-2-快速生成-CSS-代码"><a href="#8-2-快速生成-CSS-代码" class="headerlink" title="8,2 快速生成 CSS 代码"></a>8,2 快速生成 CSS 代码</h2><p>采用的方式就是使用 CSS 属性名称之间单词的首字母组合 + tab</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="comment">/* 设置宽度500px */</span></span><br><span class="line">    w500</span><br><span class="line">    <span class="comment">/* 设置高度1000px */</span></span><br><span class="line">    h1000</span><br><span class="line">    <span class="comment">/* 背景颜色 */</span></span><br><span class="line">    bc</span><br><span class="line">    fs</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



<h1 id="9-CSS复合选择器"><a href="#9-CSS复合选择器" class="headerlink" title="9, CSS复合选择器"></a>9, CSS复合选择器</h1><p>复合选择器是由基本选择器组成</p>
<p><strong>优势 :</strong></p>
<ul>
<li>复合选择器可以更精准的选中标签</li>
<li>符合选择器至少有两个或者两个以上的基本选择器组成</li>
<li>常用 : 后代 , 子元素 , 并集 , 叉集 , 伪类 ……</li>
</ul>
<h2 id="9-1-后代元素选择器"><a href="#9-1-后代元素选择器" class="headerlink" title="9,1 后代元素选择器"></a>9,1 后代元素选择器</h2><p>作用 : 可以选中父元素中对应的后代元素</p>
<p>前提 : 生效的前提 , 标签关系必须是嵌套关系</p>
<p><strong>语法 :</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">选择器<span class="number">1</span> 选择器<span class="number">2</span> 选择器<span class="number">3</span> .....&#123;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 要求:将ul中的文字信息变为红色,ol中的变为绿色 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ul中的第1个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ul中的第2个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ul中的第3个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ul中的第4个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ul中的第5个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第1个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第2个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第3个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第4个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第5个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-tag">ul</span> <span class="selector-tag">li</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: red;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">ol</span> <span class="selector-tag">li</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: green;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015093051794.png" alt="image-20211015093051794" style="zoom:50%;border: solid" />    



<h2 id="9-2-子元素选择器"><a href="#9-2-子元素选择器" class="headerlink" title="9,2 子元素选择器"></a>9,2 子元素选择器</h2><p><strong>子元素选择器 : 只能选择某个元素最近的子元素 , 选中的事儿子 , 孙子无法选中</strong></p>
<p>语法 : </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">选择器<span class="number">1</span> &gt; 选择器<span class="number">2</span> &#123;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ul>
<li>子元素选择器之间使用 “&gt;” 进行间隔</li>
<li>生效的前提 , 必须是嵌套关系 , 父元素在左 , 子元素在右</li>
<li>子元素必须是嵌套关系最直接的子元素</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-id">#a</span> &gt; <span class="selector-tag">p</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">font</span>: <span class="number">35px</span> <span class="string">&#x27;宋体&#x27;</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: blue;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 改变一以下p标签的样式: 蓝色,35px,宋体 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    我是第1个p标签是,#a的子元素</span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;b&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">        我是第2个p标签,#b的子元素</span><br><span class="line">    <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    我是第3个p标签,#a的子元素</span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015095538144.png" alt="image-20211015095538144" style="zoom:50%;border: solid" />    





<h2 id="9-3-并集选择器"><a href="#9-3-并集选择器" class="headerlink" title="9,3 并集选择器"></a>9,3 并集选择器</h2><p><strong>作用 : 可以选择多个选择器 , 同时为他们指定相同的样式 , 通常用于集体声明</strong></p>
<p>并集选择器中基础选择器之间由 “,” 间隔</p>
<p>语法 : </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">选择器<span class="number">1</span>,选择器<span class="number">2</span>,选择器<span class="number">3</span> &#123;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-id">#abc</span>,<span class="selector-tag">p</span>,<span class="selector-class">.bb</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: <span class="number">#0000FF</span>;</span></span><br><span class="line"><span class="css">        <span class="comment">/* 下划线,加粗,字体大小40px */</span></span></span><br><span class="line"><span class="css">        <span class="attribute">text-decoration</span>: underline;</span></span><br><span class="line"><span class="css">        <span class="attribute">font-weight</span>: bold;</span></span><br><span class="line"><span class="css">        <span class="attribute">font-size</span>: <span class="number">40px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;abc&quot;</span>&gt;</span></span><br><span class="line">    我是id属性为abc的div标签</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>我是一个p标签,是一个段落<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">&quot;bb&quot;</span>&gt;</span></span><br><span class="line">    我是class属性值为bb的span标签</span><br><span class="line"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015100829028.png" alt="image-20211015100829028" style="zoom:50%;border: solid" />    





<h2 id="9-4-伪类选择器"><a href="#9-4-伪类选择器" class="headerlink" title="9,4 伪类选择器"></a>9,4 伪类选择器</h2><p><strong>作用 : 为指定的元素添加特效 , 使用 “ : “ 编写伪类选择器</strong></p>
<ul>
<li><strong>链接伪类选择器</strong></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:link</span>  <span class="comment">/* 超链接没有被访问时的样式, :link可以省略 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> <span class="comment">/* 超链接被访问后的样式 */</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> <span class="comment">/*鼠标经过超链接的样式*/</span></span><br><span class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:active</span> <span class="comment">/* 鼠标点击超链接的样式 */</span></span><br></pre></td></tr></table></figure>

<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="comment">/* 鼠标为点击时的样式 */</span></span></span><br><span class="line"><span class="css">    <span class="selector-tag">a</span><span class="selector-pseudo">:link</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: <span class="number">#008000</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">text-decoration</span>: none;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="comment">/* 鼠标访问后超链接的样式 */</span></span></span><br><span class="line"><span class="css">    <span class="selector-tag">a</span><span class="selector-pseudo">:visited</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: <span class="number">#FFA500</span>;	</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="comment">/* 鼠标经过超链接是的样式 */</span></span></span><br><span class="line"><span class="css">    <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: blueviolet;</span></span><br><span class="line"><span class="css">        <span class="attribute">font-size</span>: <span class="number">50px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">font-weight</span>: <span class="number">700</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="comment">/* 鼠标点击时的超链接样式 */</span></span></span><br><span class="line"><span class="css">    <span class="selector-tag">a</span><span class="selector-pseudo">:active</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">font-size</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: cornflowerblue;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;http://www.baidu.com&quot;</span>&gt;</span>点我一下,进入游戏<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>**编写链接伪类选择器的注意点 : **</p>
<ol>
<li>为了确保链接伪类生效 , 需要按照 <strong>LVHA</strong> 顺序编写伪类 <strong>:link :visited :hover :active</strong></li>
<li>因为超链接在每个浏览器中具有不同的默认样式 , 所以我们需要给链接单独指定样式</li>
</ol>
<p><strong>引用于其他的元素</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;button&quot;</span>&gt;</span>点击一下<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight cs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">button &#123;</span><br><span class="line">    width: <span class="number">150</span>px;</span><br><span class="line">    height: <span class="number">60</span>px;</span><br><span class="line">    background-color: lightblue;</span><br><span class="line">    <span class="comment">/* 过渡 */</span></span><br><span class="line">    transition: all <span class="number">.5</span>s;</span><br><span class="line">    <span class="comment">/* 边框 */</span></span><br><span class="line">    border: none;</span><br><span class="line">    <span class="comment">/* 圆角边框 */</span></span><br><span class="line">    border-radius: <span class="number">15</span>px;</span><br><span class="line">    <span class="comment">/* 清除轮廓线 */</span></span><br><span class="line">    outline: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br><span class="line">button:hover &#123;</span><br><span class="line">    background-color: deepskyblue;</span><br><span class="line">&#125;</span><br><span class="line">button:active &#123;</span><br><span class="line">    color: white;</span><br><span class="line">    background-color: <span class="meta">#0000FF;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015110927620.png" alt="image-20211015110927620" style="zoom:50%;" />    





<ul>
<li><strong>focus 伪类选择器</strong></li>
</ul>
<p>作用 : 用于选取获得鼠标焦点的表单元素</p>
<p>焦点就是光标 , 一般情况只有input表单才能获取</p>
<p><strong>当光标处在 input 元素中时 , 伪类的样式才会生效 , 一旦光标离开恢复默认样式</strong></p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:focus</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#008000</span>;</span><br><span class="line">    <span class="attribute">font</span>: <span class="number">35px</span> <span class="string">&#x27;楷体&#x27;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015110742569.png" alt="image-20211015110742569" style="zoom:50%;border: solid" />    





<h1 id="10-元素的显示模式"><a href="#10-元素的显示模式" class="headerlink" title="10, 元素的显示模式"></a>10, 元素的显示模式</h1><ul>
<li>内联元素 : 显示效果一行中可以有多个 , 效果是不换行</li>
<li>块级元素 : 独占一行, 效果是会换行</li>
</ul>
<h2 id="10-1-块级元素"><a href="#10-1-块级元素" class="headerlink" title="10,1 块级元素"></a>10,1 块级元素</h2><p>常见的有 : div , p , ul , h1~h6 …..</p>
<p>块级元素的特点 : </p>
<ul>
<li>独占一行</li>
<li>高度 , 宽度 , 内外边距都可以控制</li>
<li>宽度默认和容器同宽</li>
<li>块级元素中可以装载任意类型的元素</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-id">#box</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-id">#box</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015111905086.png" alt="image-20211015111905086" style="zoom:50%;" />    



<ul>
<li><p>注意 :</p>
<ul>
<li><p><strong>文字类的元素中最好不要使用块级元素</strong></p>
</li>
<li><p>p 标签中主要用于存放文字 , 因此 p 标签中不能使用块级元素</p>
<p>特别是不要使用 div</p>
</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    会当凌绝顶,</span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    一览众山小.</span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#FF0000</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015112329078.png" alt="image-20211015112329078" style="zoom:50%;" />    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015112349924.png" alt="image-20211015112349924" style="zoom:50%;" /></p>
<h2 id="10-2-内联元素-行内元素"><a href="#10-2-内联元素-行内元素" class="headerlink" title="10,2 内联元素, 行内元素"></a>10,2 内联元素, 行内元素</h2><p>常见的有 : span , a , sub , sup , em ,i , u ,ins , del ……..</p>
<p><strong>特点 :</strong></p>
<ul>
<li>不换行 , 一行之中有多个</li>
<li>宽度和高度不可设置</li>
<li>默认的宽度是内容的宽度</li>
<li>行内元素只能容纳文本或者其他行内元素</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#spa</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#00BFFF</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">&quot;spa&quot;</span>&gt;</span></span><br><span class="line">    我是span标签,</span><br><span class="line"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015113037337.png" alt="image-20211015113037337">    </p>
<h2 id="10-3-行内块元素"><a href="#10-3-行内块元素" class="headerlink" title="10,3 行内块元素"></a>10,3 行内块元素</h2><p>常见行内块元素 : img , input</p>
<p>行内块元素同时具备了行内元素和块级元素的特点</p>
<p><strong>特点 :</strong></p>
<ul>
<li>默认的宽度就是自身内容的宽度 (内联元素)</li>
<li>高度 , 宽度 , 内外边距 可以控制 (块级元素)</li>
<li>一行中可以显示多个 , 相邻的行内块之间有一个空白的间隙 (内联元素)</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;img/img03.png&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;img/img03.png&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">600px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">input</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015134925878.png" alt="image-20211015134925878"></p>
<h2 id="10-4-元素显示模式装换"><a href="#10-4-元素显示模式装换" class="headerlink" title="10,4 元素显示模式装换"></a>10,4 元素显示模式装换</h2><p>特殊的情况下 , 我们需要进行元素的显示模式的转换 , 简单的理解为 : 行内元素转换块级元素元素 , 或者行内元素装换行内块元素</p>
<p>通过 <strong>display</strong> 属性装换元素的显示模式</p>
<p>属性值 :</p>
<ul>
<li><strong>block</strong> : 将元素转换为块级元素</li>
<li><strong>inline</strong> : 将元素转换为行内元素</li>
<li><strong>inline-block</strong> : 将元素转换为行内块元素</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-tag">a</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">display</span>: block;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">300px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">100px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: <span class="number">#00aaff</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.in1</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">350px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">350px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">display</span>: inline;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: <span class="number">#ff55ff</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.in2</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">350px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">350px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">display</span>: inline;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: <span class="number">#5555ff</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.box1</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">display</span>: inline-block;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: <span class="number">#8A2BE2</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.box2</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">display</span>: inline-block;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: <span class="number">#FF0000</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>结构</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>转换块级元素: block<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 将超链接转换为块级元素 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;04-伪类选择器.html&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>转换行内元素: inline<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;in1&quot;</span>&gt;</span>我是class为in1的div<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;in2&quot;</span>&gt;</span>我是class为in2的div<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>转换行内块元素: inline-block<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box1&quot;</span>&gt;</span>我是div标签<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2&quot;</span>&gt;</span>我是div标签<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015140702551.png" alt="image-20211015140702551" style="zoom: 67%;border: solid" />    



<h1 id="11-CSS背景"><a href="#11-CSS背景" class="headerlink" title="11, CSS背景"></a>11, CSS背景</h1><p>通过 CSS 背景属性 , 可以给页面添加背景的样式</p>
<p>背景颜色 , 背景图 , 背景平铺 , 背景图像的固定 </p>
<h2 id="11-1-背景颜色"><a href="#11-1-背景颜色" class="headerlink" title="11,1 背景颜色"></a>11,1 背景颜色</h2><p><strong>background-color</strong> 属性定于网页元素的北京颜色</p>
<p>默认值 : transparent 透明色</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#box</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: transparent;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">body</span> &#123;</span><br><span class="line">	<span class="attribute">background-color</span>: <span class="number">#00BFFF</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span>&gt;</span></span><br><span class="line">    背景测试</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015141500127.png" alt="image-20211015141500127" style="zoom:50%;border: solid" />    



<h2 id="11-2-背景图片"><a href="#11-2-背景图片" class="headerlink" title="11,2 背景图片"></a>11,2 背景图片</h2><p><strong>background-image</strong> 属性设置网页或者元素的背景图片</p>
<p>属性值 : </p>
<ul>
<li>none : 没图</li>
<li>url(‘图片的地址’)</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;bgi&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.bgi</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#00AAFF</span>;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">img/HBuilder.png</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015141935540.png" alt="image-20211015141935540" style="zoom:50%;" />    效果 : 一张图片铺满整个元素 (背景平铺)</p>
<h2 id="11-3-背景平铺"><a href="#11-3-背景平铺" class="headerlink" title="11,3 背景平铺"></a>11,3 背景平铺</h2><p>通过 <strong>background-repeat</strong> 属性控制背景的平铺</p>
<p>属性值 :</p>
<ul>
<li><strong>repaet</strong> : 背景平铺(默认)</li>
<li><strong>no-repeat</strong> : 背景不平铺</li>
<li><strong>repeat-x</strong> : 背景图横向平铺</li>
<li><strong>repeat-y</strong> : 背景图纵向平铺</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.bgi</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#00AAFF</span>;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">img/HBuilder.png</span>);</span><br><span class="line">    <span class="attribute">background-repeat</span>: no-repeat;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015142519882.png" alt="image-20211015142519882" style="zoom: 33%;" />    



<h2 id="11-4-背景的大小"><a href="#11-4-背景的大小" class="headerlink" title="11,4 背景的大小"></a>11,4 背景的大小</h2><p>通过 <strong>background-size</strong> 控制背景图的大小</p>
<p>属性值 : </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background-size</span>: x y;</span><br></pre></td></tr></table></figure>

<p>x : 图片的宽度</p>
<p>y : 图片的高度</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.bgi</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#00AAFF</span>;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">img/HBuilder.png</span>);</span><br><span class="line">    <span class="attribute">background-repeat</span>: no-repeat;</span><br><span class="line">    <span class="attribute">background-size</span>: <span class="number">500px</span> <span class="number">500px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015142757455.png" alt="image-20211015142757455" style="zoom:33%;" />    



<h2 id="11-5-背景图片的位置"><a href="#11-5-背景图片的位置" class="headerlink" title="11,5 背景图片的位置"></a>11,5 背景图片的位置</h2><p>通过 <strong>background-position</strong> 设置背景图的位置</p>
<p>background-position: x y;</p>
<p>x : 代表图片的横向移动的距离</p>
<p>y : 代表图片纵向移动的距离</p>
<p><strong>属性值 :</strong></p>
<ul>
<li>像素值 / 百分比 : 像素为设定固定长度 , 百分根据父元素的宽高决定</li>
<li>方位词 : top , center , bottom , left , right  </li>
</ul>
<p><strong>一个属性值得情况 :</strong></p>
<ul>
<li>如果是数值 / 百分比 , 设定的是背景图横向移动的距离 , 纵向默认居中</li>
<li>方位词 : 控制背景图的位置 , 另一个默认中</li>
</ul>
<p>==多种不同的属性值可以混搭使用==</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.bgi2</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#00AAFF</span>;</span><br><span class="line">    <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">img/HBuilder.png</span>);</span><br><span class="line">    <span class="attribute">background-repeat</span>: no-repeat;</span><br><span class="line">    <span class="comment">/* background-position: 100px 50px; */</span></span><br><span class="line">    <span class="comment">/* background-position: 50% 30%; */</span></span><br><span class="line">    <span class="comment">/* background-position: bottom left; */</span></span><br><span class="line">    <span class="comment">/* background-position: bottom; */</span></span><br><span class="line">    <span class="attribute">background-position</span>: <span class="number">30%</span> center;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015145424882.png" alt="image-20211015145424882" style="zoom:33%;" />    





<h2 id="11-6-背景图片是否固定-背景附着"><a href="#11-6-背景图片是否固定-背景附着" class="headerlink" title="11,6 背景图片是否固定 (背景附着)"></a>11,6 背景图片是否固定 (背景附着)</h2><p>作用 : 控制背景图是否会跟随滚动条而滚动</p>
<p>通过 <strong>background-attachment</strong> 控制背景的附着</p>
<p><strong>属性值 :</strong></p>
<ul>
<li><strong>scroll</strong> : 背景图会跟随滚动条滚动 (默认)</li>
<li><strong>fixed</strong> : 背景图固定</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-tag">body</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-image</span>: <span class="built_in">url</span>(<span class="string">img/img03.png</span>);</span></span><br><span class="line"><span class="css">        <span class="attribute">background-repeat</span>: no-repeat;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-position</span>: top center;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-attachment</span>: fixed;</span></span><br><span class="line"><span class="css">	&#125;	</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015150235684.png" alt="image-20211015150235684"></p>
<h2 id="11-7-背景复合属性"><a href="#11-7-背景复合属性" class="headerlink" title="11,7 背景复合属性"></a>11,7 背景复合属性</h2><p>通过 <strong>background</strong> 来编写背景的复合写法</p>
<p><strong>语法 :</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">background</span>: 背景颜色 背景图地址 北京平铺 背景附着 背景图位置</span><br></pre></td></tr></table></figure>

<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-tag">body</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">background</span>: <span class="number">#ADD8E6</span> <span class="built_in">url</span>(<span class="string">img/img03.png</span>) no-repeat fixed <span class="number">0px</span> <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015150926364.png" alt="image-20211015150926364"></p>
<h2 id="11-8-背景色半透明"><a href="#11-8-背景色半透明" class="headerlink" title="11,8 背景色半透明"></a>11,8 背景色半透明</h2><p>通过属性值 <strong>rgba(0,0,0,.3)</strong></p>
<p>r是red , g是green , b是blue , a是alpha 透明</p>
<ul>
<li>第4参数设定的事透明度 , 取值范围 0 ~ 1</li>
<li>惯用的写法是将小数中整数位的 0 去掉</li>
<li>CSS3 中 , IE9 版本以上好用</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.father</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">500px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: <span class="number">#ADD8E6</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.son</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">150px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">150px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">255</span>, <span class="number">255</span>, <span class="number">127</span>, .<span class="number">5</span>);</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211015151925711.png" alt="image-20211015151925711" style="zoom:50%;" />    







<h1 id="12-CSS三大特性"><a href="#12-CSS三大特性" class="headerlink" title="12, CSS三大特性"></a>12, CSS三大特性</h1><p><strong>CSS中有三个非常重要的特性 : 层叠性 , 继承性 , 优先级</strong></p>
<h2 id="12-1-层叠性"><a href="#12-1-层叠性" class="headerlink" title="12,1 层叠性"></a>12,1 层叠性</h2><p>场景 : 相同的选择器设置同一样式 , 有一个样式会被 <strong>覆盖(层叠)</strong> </p>
<p>作用 : 解决样式冲突问题</p>
<p>**层叠性的原则 : **</p>
<ul>
<li>样式冲突 , 遵循就近原则 , 离哪个样式近 , 就执行那个样式</li>
<li>样式不冲突 , 不层叠</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: blue;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>我是一个大盒子,是一个div标签<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h2 id="12-2-继承性"><a href="#12-2-继承性" class="headerlink" title="12,2 继承性"></a>12,2 继承性</h2><p>子元素会继承父元素某些样式 , 比如 : 字体颜色 , 字号</p>
<ul>
<li>优势 ( 继承 Inherited )<ul>
<li>降低 CSS 代码的复杂度</li>
<li>子元素可以继承父元素的样式 , <strong>text- , font- , line- , color</strong> , 以这些单词开头的样式会被子元素继承</li>
</ul>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    我是一个大盒子,是一个div标签</span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>我是div中的span标签<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是div中ul里面的一个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018090730622.png" alt="image-20211018090730622" style="zoom:50%;" />    



<ul>
<li><strong>行高 ( line-height ) 的继承</strong><ul>
<li>行高的属性是可以不写单位的 , 直接写数字 , 代表行高为字体大小的几倍</li>
<li>如果子元素没有设置行高 , 这会继承父元素的文字大小 * 1.5</li>
<li>如果子元素设置了文字尺寸 : 当前子元素文字大小 * 1.5</li>
<li><strong>行高继承的是倍数 , 最终行高的高度 , 是由当前元素的字体大小和倍数相乘获得的</strong></li>
</ul>
</li>
</ul>
<p><strong>优势 : 子元素哦可以根据自己文字大小自动的调整当前的行高</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">30px</span>;</span><br><span class="line">    <span class="attribute">color</span>: red;</span><br><span class="line">    <span class="attribute">line-height</span>: <span class="number">1.5</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">li</span> &#123;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">20px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    我是一个大盒子,是一个div标签</span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>我是div中的span标签<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是div中ul里面的一个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018092214322.png" alt="image-20211018092214322"></p>
<h2 id="12-3-优先级"><a href="#12-3-优先级" class="headerlink" title="12,3 优先级"></a>12,3 优先级</h2><p>当同一个元素指定了多个选择器的时候 , 就触发优先级</p>
<ul>
<li>选择器相同 , 执行层叠性</li>
<li>选择器不同 , 则会根据选择器的权重执行 (优先级)</li>
</ul>
<table>
<thead>
<tr>
<th>选择器</th>
<th>权重</th>
<th>数字</th>
</tr>
</thead>
<tbody><tr>
<td>继承 , * (全局)</td>
<td>0,0,0,0</td>
<td>0</td>
</tr>
<tr>
<td>元素(标签)选择器</td>
<td>0,0,0,1</td>
<td>1</td>
</tr>
<tr>
<td>类选择器 / 伪类选择器</td>
<td>0,0,1,0</td>
<td>10</td>
</tr>
<tr>
<td>ID 选择器</td>
<td>0,1,0,0</td>
<td>100</td>
</tr>
<tr>
<td>行内样式 style=””</td>
<td>1,0,0,0</td>
<td>1000</td>
</tr>
<tr>
<td><strong>!important</strong></td>
<td>无穷大</td>
<td>无穷大</td>
</tr>
</tbody></table>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-id">#aa</span> &#123; <span class="comment">/*权重: 100*/</span></span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: blueviolet;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.box</span> &#123; <span class="comment">/*权重: 10*/</span></span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: aqua;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-tag">div</span> &#123; <span class="comment">/*权重: 1*/</span></span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: <span class="number">#0000FF</span><span class="meta">!important</span>;<span class="comment">/* 无穷大 */</span></span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 行内样式:1000 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">&quot;color: chocolate;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span> <span class="attr">id</span>=<span class="string">&quot;aa&quot;</span>&gt;</span>我是div标签,我被很多选择器选中了<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018094523408.png" alt="image-20211018094523408" style="zoom:67%;border: solid" />    



<ul>
<li>注意优先级中的继承问题</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#bb</span> &#123; <span class="comment">/*权重: 100*/</span></span><br><span class="line">    <span class="attribute">color</span>: blueviolet; <span class="comment">/*紫*/</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">span</span> &#123; <span class="comment">/*权重: 1*/</span></span><br><span class="line">    <span class="attribute">color</span>: green;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 注意: 继承的权重0,不管父元素的选择器权重有多高,继承过来就是0 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;bb&quot;</span>&gt;</span></span><br><span class="line">    我是id为bb的div标签</span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span>我是div中的span<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018095226192.png" alt="image-20211018095226192">    </p>
<ul>
<li>复合选择器权重叠加问题</li>
</ul>
<p>将复合选择器中的所有基本选择器的权重数值 , 加到一起进行比较 , 最终数值最大会被执行</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span> <span class="selector-id">#cc</span> <span class="selector-tag">li</span> &#123; <span class="comment">/* 权重: 1 + 100 + 1 = 102 */</span></span><br><span class="line">    <span class="attribute">color</span>: chocolate;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#cc</span> <span class="selector-tag">li</span> &#123; <span class="comment">/* 权重: 100 + 1 = 101 */</span></span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#8A2BE2</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.ul</span> <span class="selector-tag">li</span> &#123; <span class="comment">/* 权重: 10 + 1 = 11 */</span></span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#008000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ul</span> <span class="selector-tag">li</span> &#123; <span class="comment">/* 权重: 1 + 1 = 2  */</span></span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#FF0000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">li</span> &#123; <span class="comment">/* 权重: 1 */</span></span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;ul&quot;</span> <span class="attr">id</span>=<span class="string">&quot;cc&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第1个li标签<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第2个li标签<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第3个li标签<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018100117435.png" alt="image-20211018100117435" style="zoom:67%;border: solid" />    



<ul>
<li><p><strong>注意 : 权重的计算 , ==可以进行叠加 , 但是数值不会进位==</strong></p>
<p><strong>0,0,0,0 每一位代表不同选择器的数量</strong></p>
<p>10个标签选择器 : <strong>0,0,0,10</strong></p>
<p>10个class选择器 : <strong>0,0,10,0</strong></p>
</li>
</ul>
<h1 id="13-盒子模型"><a href="#13-盒子模型" class="headerlink" title="13, 盒子模型"></a>13, 盒子模型</h1><p>网页的布局过程中 :</p>
<ol>
<li>准备好网页元素 , 网页元素基本都是盒子</li>
<li>利用 CSS 延时设置好盒子的样式 , 然后拜访到对应的位置</li>
<li>向盒子中装内容</li>
</ol>
<p>网页布局的核心 : 用 CSS 样式摆盒子</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018100953849.png" alt="image-20211018100953849">    </p>
<ul>
<li>margin : 外边距</li>
<li>border : 边框</li>
<li>padding : 内边距</li>
<li>content : 内容</li>
</ul>
<h2 id="13-1-边框-border"><a href="#13-1-边框-border" class="headerlink" title="13,1 边框 (border)"></a>13,1 边框 (border)</h2><p>作用 : 设置元素的边框的样式 , 边框有三个部分组成 , 粗细 , 样式(虚 , 实 , 点) , 颜色</p>
<ul>
<li>border-width : 定义边框的粗细 , 单位 px</li>
<li>border-style : 定义边框的样式</li>
<li>border-color : 定义边框的颜色</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-tag">div</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">        <span class="comment">/* 边框的粗细 */</span></span></span><br><span class="line"><span class="css">        <span class="attribute">border-width</span>: <span class="number">5px</span>;</span></span><br><span class="line"><span class="css">        <span class="comment">/* 边框的样式:solid实线, dashed虚线, dotted电线 */</span></span></span><br><span class="line"><span class="css">        <span class="attribute">border-style</span>: dashed;</span></span><br><span class="line"><span class="css">        <span class="comment">/* 边框的颜色 */</span></span></span><br><span class="line"><span class="css">        <span class="attribute">border-color</span>: <span class="number">#0000FF</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018101832081.png" alt="image-20211018101832081" style="zoom:50%;" />    



<ul>
<li>CSS边框的简写</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">border</span>: width style color;<span class="comment">/* 没有顺序 */</span></span><br></pre></td></tr></table></figure>

<p>border-top : 设置上边框样式</p>
<p>border-left : 设置左边框样式</p>
<p>border-right : 设置右边框样式</p>
<p>border-bottom : 设置下边框样式</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">border-top</span>: <span class="number">5px</span> solid <span class="number">#0000FF</span>;</span><br><span class="line">    <span class="attribute">border-left</span>: <span class="number">10px</span> dashed <span class="number">#008000</span>;</span><br><span class="line">    <span class="attribute">border-right</span>: <span class="number">15px</span> dotted <span class="number">#8A2BE2</span>;</span><br><span class="line">    <span class="attribute">border-bottom</span>: <span class="number">20px</span> solid <span class="number">#D2691E</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018102609593.png" alt="image-20211018102609593" style="zoom:50%;" />    

<ul>
<li><strong>表格的单元格边框合并</strong></li>
</ul>
<p>属性 : <strong>border-collapse</strong></p>
<p>属性值 : <strong>collapse 合并</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">table</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">400px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">table</span>,<span class="selector-tag">td</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> dashed <span class="number">#D2691E</span>;</span><br><span class="line">    <span class="attribute">border-collapse</span>: collapse;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 生成3*4的表格 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018104753341.png" alt="image-20211018104753341" style="zoom: 50%;" />    



<ul>
<li><strong>注意 : 边框会影响盒子的大小</strong><ul>
<li>测量的时候不算上边框</li>
<li>设定盒子样式的时候将边框算上</li>
</ul>
</li>
</ul>
<h2 id="13-2-内边距"><a href="#13-2-内边距" class="headerlink" title="13,2 内边距"></a>13,2 内边距</h2><p>属性 : <strong>padding</strong></p>
<p>作用 : 控制内容到边框的距离</p>
<ul>
<li>padding-top : 上内边距</li>
<li>padding-left : 左内边距</li>
<li>padding-right : 右内边距</li>
<li>padding-bottom : 下内边距</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.out</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">    <span class="attribute">padding-top</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">padding-left</span>: <span class="number">40px</span>;</span><br><span class="line">    <span class="attribute">padding-right</span>: <span class="number">80px</span>;</span><br><span class="line">    <span class="attribute">padding-bottom</span>: <span class="number">160px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.in</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#FF0000</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;out&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;in&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018105934339.png" alt="image-20211018105934339" style="zoom:50%;" />    



<ul>
<li><p><strong>padding 的复合写法</strong></p>
<p>操作 padding 属性</p>
<p>padding的属性值可以是 1~ 4个</p>
<ul>
<li><p>1个属性值 : 控制的事4个方向的内边距</p>
</li>
<li><p>2个属性值 : 上下 , 左右</p>
</li>
<li><p>3个属性值 : 上 , 左右 , 下</p>
</li>
<li><p>4个属性值 : 顺时针 , 上 , 右 , 下 , 左</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018110534379.png" alt="image-20211018110534379">    </p>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.out</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">50px</span> <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">50px</span> <span class="number">100px</span> <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">50px</span> <span class="number">100px</span> <span class="number">200px</span> <span class="number">400px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.in</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#FF0000</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;out&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;in&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018110714549.png" alt="image-20211018110714549" style="zoom:50%;" />    </li>
</ul>
<p><strong>操作内边距</strong></p>
<ol>
<li>内容和边框的距离增加了</li>
<li>padding 影响了盒子的大小</li>
</ol>
<h2 id="13-3-外边距"><a href="#13-3-外边距" class="headerlink" title="13,3 外边距"></a>13,3 外边距</h2><p>属性 : <strong>margin</strong></p>
<p>作用 : 控制元素与元素之间的距离</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.top</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">margin-left</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">margin-bottom</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">margin-right</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bottom</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#FF0000</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box top&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box bottom&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018111816127.png" alt="image-20211018111816127" style="zoom:50%;border: solid" />    



<ul>
<li><strong>margin复合写法 , 和padding一个规则</strong><ul>
<li>1个属性值 : 控制的事4个方向的内边距</li>
<li>2个属性值 : 上下 , 左右</li>
<li>3个属性值 : 上 , 左右 , 下</li>
<li>4个属性值 : 顺时针 , 上 , 右 , 下 , 左</li>
</ul>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.top</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">50px</span> <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">50px</span> <span class="number">100px</span> <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">50px</span> <span class="number">100px</span> <span class="number">200px</span> <span class="number">400px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bottom</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#FF0000</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box top&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box bottom&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018111957069.png" alt="image-20211018111957069" style="zoom:50%;border: solid" />    



<p><strong>外边距的应用 : 外边距可以做块级元素的水平居中 , 但是必须满足两个条件</strong></p>
<ol>
<li>盒子必须有宽度</li>
<li>盒子的外边距设置为auto</li>
</ol>
<p><strong>常见的写法有</strong></p>
<ul>
<li>margin-left : auto; (居右) margin-right: auto;(居左)</li>
<li>margin: auto(居中)</li>
<li>margin: 0px auto (<strong>最常使用的</strong>)</li>
</ul>
<p>**注意 : **以上这些方式是让块级元素水平居中 , 行内元素或者行内块元素水平居中的给其父元素添加 <strong>text-align: center</strong></p>
<h2 id="13-4-外边距的合并问题"><a href="#13-4-外边距的合并问题" class="headerlink" title="13,4 外边距的合并问题"></a>13,4 外边距的合并问题</h2><h3 id="13-4-1-外边距的垂直合并-并列关系"><a href="#13-4-1-外边距的垂直合并-并列关系" class="headerlink" title="13,4,1 外边距的垂直合并 (并列关系)"></a>13,4,1 外边距的垂直合并 (并列关系)</h3><p>场景 : 上下两个相邻的块级元素之间同时具备上下外边距 , 元素之间的距离 , 会外边距的最大值</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box1</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">    <span class="attribute">margin-bottom</span>: <span class="number">150px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#008000</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">200px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box1 box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2 box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018112809821.png" alt="image-20211018112809821" style="zoom:50%;border: solid" />    

<p>==解决方案 :==</p>
<p>指设定一个外边距 , 或者上外边距或者下外边距</p>
<h3 id="13-4-2-嵌套块元素垂直外边距塌陷"><a href="#13-4-2-嵌套块元素垂直外边距塌陷" class="headerlink" title="13,4,2 嵌套块元素垂直外边距塌陷"></a>13,4,2 嵌套块元素垂直外边距塌陷</h3><p>场景 : 对两个嵌套关系的块元素 , 父元素有上外边距 , 子元素也有上外边距 , 此时父元素会塌陷较大的外边距值</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.out</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#00FFFF</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.in</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#D2691E</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">200px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;out&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;in&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>解决方案</strong></p>
<ol>
<li>给父元素添加上边框</li>
<li>为父元素定义上内边距 , 代替子元素的上外边距</li>
<li>为父元素添加 <strong>overflow</strong> , 指定属性值为 hidden</li>
</ol>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.out</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#00FFFF</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="comment">/* border-top: .5px solid black; */</span></span><br><span class="line">    <span class="comment">/* padding-top: 200px; */</span></span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.in</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#D2691E</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">200px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;out&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;in&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018135634688.png" alt="image-20211018135634688" style="zoom:50%;border: solid" />    

<p>==<strong>添加了浮动 , 定位的盒子是不会塌陷的</strong>==</p>
<ul>
<li><p>清除浏览器默认的内外边距</p>
<p>使用全局选择器 : *** { }**</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">* &#123;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0px</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">0px</span>;</span><br><span class="line">    ........</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<h1 id="14-圆角边框-重点"><a href="#14-圆角边框-重点" class="headerlink" title="14, 圆角边框 (重点)"></a>14, 圆角边框 (重点)</h1><p>在 CSS3 新增了圆角边框的属性</p>
<p><strong>border-radius</strong> 用于设置块元素边框的弧度 , 数值越大弧度越大</p>
<p>语法:</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">border-radius</span>: 数值px / 百分比%;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.radius</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">    <span class="comment">/* border-radius: 20px; */</span></span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">20%</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;radius&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018142641985.png" alt="image-20211018142641985" style="zoom:50%;" />    



<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.circle</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#008000</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.ellipse</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#8A2BE2</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.radius-square</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#D2691E</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>圆形<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;circle&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>椭圆<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;ellipse&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>圆角矩形<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;radius-square&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018142728211.png" alt="image-20211018142728211" style="zoom:50%;border: solid" />    



<ul>
<li><strong>圆角边框的多个属性值</strong></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.two</span> &#123;</span><br><span class="line">    <span class="comment">/* 左上右下, 右上左下 */</span></span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">10px</span> <span class="number">40px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: cadetblue;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.three</span> &#123;</span><br><span class="line">    <span class="comment">/* 左上, 右上左下, 右下 */</span></span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">10px</span> <span class="number">20px</span> <span class="number">40px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: darkgreen;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.four</span> &#123;</span><br><span class="line">    <span class="comment">/* 顺时针 */</span></span><br><span class="line">    <span class="comment">/* 左上 右上 右下 左下 */</span></span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">10px</span> <span class="number">20px</span> <span class="number">30px</span> <span class="number">40px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#FFC0CB</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;two box&quot;</span>&gt;</span>两个属性值<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;three box&quot;</span>&gt;</span>三个属性值<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;four box&quot;</span>&gt;</span>四个属性值<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018145009116.png" alt="image-20211018145009116">    </p>
<h1 id="15-盒子阴影"><a href="#15-盒子阴影" class="headerlink" title="15, 盒子阴影"></a>15, 盒子阴影</h1><p>CSS3中添加了盒子阴影的属性 , 我们可以使用 <strong>box-shadow</strong> 属性为盒子添加阴影</p>
<p>语法 :</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">box-shadow</span>: h-shadow v-shadow blur spread color inset/outset;</span><br></pre></td></tr></table></figure>

<ul>
<li>h-shadow : 必有属性 , 阴影的水平位置 , 允许有负值 , 正值阴影向右侧移动 , 负值阴影向左侧移动</li>
<li>v-shadow : 必有属性 , 阴影的垂直位置 , 允许有负值 , 正值阴影向下侧移动 , 负值阴影向上侧移动</li>
<li>blur : 可选 , 模糊距离 , 负值没有阴影 , 0为纯色 , 正值越大模糊程度越大</li>
<li>spread : 可选 , 阴影的尺寸</li>
<li>color : 可选 , 阴影的颜色, 通常使用 rgba </li>
<li>inset : 可选 , 将外部阴影改为内部阴影 , 默认值为 outset , <strong>注意 outset 不需要设置</strong></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.shadow</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: green;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">    <span class="comment">/* h-shadow v-shadow blur spread color inset/outset */</span></span><br><span class="line">    <span class="attribute">box-shadow</span>: <span class="number">5px</span> <span class="number">5px</span> <span class="number">10px</span> <span class="number">15px</span> <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,.<span class="number">3</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;shadow&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018151601307.png" alt="image-20211018151601307" style="zoom:50%;" />    



<h1 id="16-文字阴影"><a href="#16-文字阴影" class="headerlink" title="16, 文字阴影"></a>16, 文字阴影</h1><p>在 CSS3 提供了设置文字阴影的属性</p>
<p>属性 : <strong>text-shadow</strong></p>
<p>语法 :</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">text-shadow</span>: h-shadow v-shadow blur color;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>h-shadow : 必有属性 , 阴影的水平位置 , 允许有负值 , 正值阴影向右侧移动 , 负值阴影向左侧移动</p>
</li>
<li><p>v-shadow : 必有属性 , 阴影的垂直位置 , 允许有负值 , 正值阴影向下侧移动 , 负值阴影向上侧移动</p>
</li>
<li><p>blur : 可选 , 模糊距离 , 负值没有阴影 , 0为纯色 , 正值越大模糊程度越大</p>
</li>
<li><p>spread : 可选 , 阴影的尺寸</p>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">h1</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#006400</span>;</span><br><span class="line">    <span class="attribute">text-shadow</span>: <span class="number">5px</span> <span class="number">5px</span> <span class="number">10px</span> blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>我是一级标题,我有影子<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018152146536.png" alt="image-20211018152146536" style="zoom:50%;" />    



<h1 id="17-CSS浮动-float"><a href="#17-CSS浮动-float" class="headerlink" title="17, CSS浮动 (float)"></a>17, CSS浮动 (float)</h1><h2 id="17-1-网页三种布局方式"><a href="#17-1-网页三种布局方式" class="headerlink" title="17,1 网页三种布局方式"></a>17,1 网页三种布局方式</h2><ul>
<li>普通流 / 标准流 / 文档流</li>
<li>浮动</li>
<li>定位</li>
</ul>
<h2 id="17-2-标准流"><a href="#17-2-标准流" class="headerlink" title="17,2 标准流"></a>17,2 标准流</h2><p><strong>所谓标准流就是按照我们规定好的方式进行排列</strong></p>
<ol>
<li>块级元素自己独占一行 , 从上向下排列</li>
<li>行内元素会一行多个排列 , 顺序是从左向右</li>
</ol>
<h2 id="17-3-浮动的作用"><a href="#17-3-浮动的作用" class="headerlink" title="17,3 浮动的作用"></a>17,3 浮动的作用</h2><ol>
<li>可以让多个块级元素同处与一行中显示 (浮动最典型应用)</li>
<li>可以让一行中的的两个块级元素一个居左一个居右</li>
</ol>
<p>网页布局的第一标准 : 多个块级元素纵向排列使用 <strong>标准流</strong> , 横向排列 <strong>使用浮动</strong></p>
<h2 id="17-4-浮动的意义"><a href="#17-4-浮动的意义" class="headerlink" title="17,4 浮动的意义"></a>17,4 浮动的意义</h2><p><strong>float</strong> 属性用于创建浮动框 , 将其移动到网页的一边 , 左边或者是右边</p>
<p><strong>属性值 :</strong></p>
<ul>
<li>none : 元素不浮动 ( 默认值 )</li>
<li>left : 元素左浮动</li>
<li>right : 元素右浮动</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">font</span>: <span class="number">700</span> <span class="number">20px</span>/<span class="number">5</span> <span class="string">&quot;微软雅黑&quot;</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.left</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#D2691E</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.right</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: right;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#FFC0CB</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;left&quot;</span>&gt;</span>left<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;left&quot;</span>&gt;</span>left<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;left&quot;</span>&gt;</span>left<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;right&quot;</span>&gt;</span>right<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018155809349.png" alt="image-20211018155809349" style="zoom:80%;border: solid" />



<h2 id="17-5-浮动的特性"><a href="#17-5-浮动的特性" class="headerlink" title="17,5 浮动的特性"></a>17,5 浮动的特性</h2><ul>
<li><p><strong>添加了浮动的元素 , 脱离标准流 (脱标)</strong></p>
<p>浮动的元素不会保留原有的位置 , 后面的标准流的盒子会占据原有的位置</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018162604055.png" alt="image-20211018162604055">    </p>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box1</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#00FFFF</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box3</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#D2691E</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box3&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018162916694.png" alt="image-20211018162916694" style="zoom:50%;border: solid" />    



<ul>
<li><p><strong>如果有很多的盒子 , 都有浮动属性 , ==会在一行显示并且顶端对齐==</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box1</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#00FFFF</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box3</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">400px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#D2691E</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box3&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>



<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018164418348.png" alt="image-20211018164418348" style="zoom:50%;border: solid" />    </li>
</ul>
<ul>
<li><p>所有的浮动的元素都拥有 <strong>行内块</strong> 的特点</p>
<p>所有的元素都可以添加浮动 , 不管原先是什么类型的 , 添加完之后全部编程行内块</p>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">span</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: aquamarine;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>我是一个span<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018164829309.png" alt="image-20211018164829309">    </p>
<ul>
<li>正常的块级元素在没有设置宽度的情况下默认和容器同宽 , 但是加了浮动之后 , 他的宽度由内容决定</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box4</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: chartreuse;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box4&quot;</span>&gt;</span>我是class为box4的div<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211018165206296.png" alt="image-20211018165206296">    </p>
<h2 id="17-6-浮动布局的注意点"><a href="#17-6-浮动布局的注意点" class="headerlink" title="17,6 浮动布局的注意点"></a>17,6 浮动布局的注意点</h2><p><strong>1, 浮动要和标准流的父元素搭配使用</strong></p>
<p>先用标准流的父盒子进行上下排列 , 之后内部的子元素采取浮动排列横向位置</p>
<p><strong>2, 一个元素浮动了 , 与其同级的元素也要添加浮动的属性</strong></p>
<p>有浮动的盒子会将没有浮动的盒子覆盖 , 影响布局 (==脱标==)</p>
<p><strong>添加了浮动元素的盒子会覆盖其后面的标准流的盒子 , 但是不影响前面的盒子</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">    <span class="selector-class">.box</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">150px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">150px</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.box1</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.box2</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">float</span>: left;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: <span class="number">#00FF00</span></span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.box3</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">width</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">200px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: <span class="number">#FF0000</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box1 box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2 box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box3&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019090444940.png" alt="image-20211019090444940" style="zoom:50%;border: solid" />    





<h2 id="17-7-清除浮动"><a href="#17-7-清除浮动" class="headerlink" title="17,7 清除浮动"></a>17,7 清除浮动</h2><p><strong>我们的浮动的元素有一个标准流的父元素 , 他们有一个共同的特点 , 都有高度 , 不是所有的父元素都需要高度</strong></p>
<p><strong>因为块级元素在没有规定高度的时候 , 内容的高度就是块级元素的高度</strong></p>
<p>情况1 : 大量的商品信息</p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019091233738.png" alt="image-20211019091233738" style="zoom:50%;" />    

<p>情况2 : 新闻内容</p>
<ul>
<li><strong>为什么需要清楚浮动</strong></li>
</ul>
<p>标准流的盒子内容往往是浮动的元素 , 就会造成一个问题 , 浮动的元素上浮的一个情况 , 那么将不在占有原有的空间 , 意味着没有规定标准流父元素高度的情况下 , 标准流父元素的高度将不在和其内容相同</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.father</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0px</span> auto;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.son</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">background-color</span>: yellow;</span><br><span class="line">    <span class="attribute">margin-left</span>: <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.footer</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0px</span> auto;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#FF0000</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;footer&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>



<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019092248601.png" alt="image-20211019092248601" style="zoom:50%;" />    

<p>由于浮动元素不再占有原有的位置 , 所以网页的排班出现了问题</p>
<ul>
<li><p><strong>清除浮动操作属性</strong></p>
<p><strong>clear</strong></p>
<p>属性值 :</p>
<ul>
<li>left : 清楚左侧浮动效果</li>
<li>right : 清楚右侧浮动效果</li>
<li>both : 清楚两侧浮动效果</li>
</ul>
<p>实际开发中 , 使用频率最高 <strong>clear: both;</strong></p>
<p><strong>==闭合浮动想过 , 将浮动的内容限制在父级元素中==</strong></p>
</li>
<li><p><strong>清除浮动的方式</strong></p>
<ul>
<li><p><strong>额外标签法 / 隔墙法</strong> ( ==W3C推荐== )</p>
<p>使用 : 在浮动元素的末尾加一个空标签 , &lt;div style=”clear: both;”&gt;&lt;/div&gt; , 或者 &lt;br /&gt;</p>
<p>优点 : 通俗易懂 , 书写方便</p>
<p>缺点 : 增加了无意义便签 , 结构较差</p>
<p><strong>要求 : 新添加的元素必须是块级元素</strong></p>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.father</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0px</span> auto;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.son</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">background-color</span>: yellow;</span><br><span class="line">    <span class="attribute">margin-left</span>: <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.footer</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0px</span> auto;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#FF0000</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.clear</span> &#123;</span><br><span class="line">    <span class="attribute">clear</span>: both;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;clear&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;footer&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019094818380.png" alt="image-20211019094818380" style="zoom:50%;" />    



<ul>
<li><p>为父元素添加 overflow 属性    </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.father</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0px</span> auto;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><p>为父元素添加 <strong>:after</strong> 伪元素</p>
<p>是额外标签法的升级 , 也是给父元素添加的</p>
<p>意义 : 在元素的内容后面加一个不可见的内容为 “” 的块级元素 , 加入 clear 进行浮动清楚</p>
<p><strong>优点 : 没有增加标签 , 结构简单</strong></p>
<p><strong>缺点 : 需要照顾低版本浏览器</strong></p>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 在当前元素的末尾处添加一个伪元素 */</span></span><br><span class="line"><span class="selector-class">.clearfix</span>:after &#123;</span><br><span class="line">    content: <span class="string">&quot;&quot;</span>;<span class="comment">/* 定义伪元素中的内容 */</span></span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">0px</span>;</span><br><span class="line">    <span class="attribute">clear</span>: both;</span><br><span class="line">    <span class="attribute">visibility</span>: hidden;<span class="comment">/* 元素不可见 */</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.clearfix</span> &#123;</span><br><span class="line">    <span class="comment">/* zoom是IE专有的属性,设置zoom:1可以在IE6版本以下清楚浮动,解决margin重叠的问题 */</span></span><br><span class="line">    zoom: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father clearfix&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;footer&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h1 id="18-CSS-定位"><a href="#18-CSS-定位" class="headerlink" title="18, CSS 定位"></a>18, CSS 定位</h1><p>属性 : <strong>==position==</strong></p>
<p>作用 : 让盒子在某一个盒子中自由的移动位置 , 或者固定在页面中的某一个位置 , 并且压住其他的盒子</p>
<h2 id="18-1-定位的组成"><a href="#18-1-定位的组成" class="headerlink" title="18,1 定位的组成"></a>18,1 定位的组成</h2><p>定位 : 将盒子固定在某一个位置 , 所以定位也是摆放 , 按照定位的方式进行移动</p>
<p><strong>定位 : 定位模式 + 边偏移量</strong></p>
<ul>
<li>**定位模式 : **元素在页面中的定位方式</li>
<li>**边偏移 : **决定元素的最终位置</li>
</ul>
<h2 id="18-2-定位模式"><a href="#18-2-定位模式" class="headerlink" title="18,2 定位模式"></a>18,2 定位模式</h2><ul>
<li><strong>static</strong> : 静态定位</li>
<li><strong>relative</strong> : 相对定位</li>
<li><strong>absolute</strong> : 绝对定位</li>
<li><strong>fixed</strong> : 固定定位</li>
</ul>
<h2 id="18-3-边偏移"><a href="#18-3-边偏移" class="headerlink" title="18,3 边偏移"></a>18,3 边偏移</h2><ul>
<li><strong>top</strong> : 顶部边偏移量 , 元素相对于父元素上边框的距离</li>
<li><strong>left</strong> : 左侧边偏移量 , 元素相对于父元素左边框的距离</li>
<li><strong>right</strong> : 右侧边偏移量 , 元素相对于父元素右边框的距离</li>
<li><strong>bottom</strong> : 底部边偏移量 , 元素相对于父元素下边框的距离</li>
</ul>
<h2 id="18-4-静态定位"><a href="#18-4-静态定位" class="headerlink" title="18,4 静态定位"></a>18,4 静态定位</h2><p>静态定位就是<strong>默认的定位方式 , 没有定位的意思</strong></p>
<p>语法 :</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">选择器 &#123;</span><br><span class="line">    <span class="attribute">position</span>: static;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>静态定位很少使用</p>
<h2 id="18-5-相对定位-重点"><a href="#18-5-相对定位-重点" class="headerlink" title="18,5 相对定位 ( 重点 )"></a>18,5 相对定位 ( 重点 )</h2><p>属性值 : <strong>relative</strong></p>
<p><strong>相对定位</strong> 在移动元素的时候 , 是相对于它 <strong>原有的位置</strong> 进行移动</p>
<p>语法 :</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">position</span>: relative;</span><br></pre></td></tr></table></figure>

<ul>
<li>**特性 (记住) **<ul>
<li>它是相对自身原有的位置来移动的</li>
<li>原有的标准流的位置继续占有 , 后面的盒子依然以标准流的方式对待他 (<strong>不脱标</strong>)</li>
</ul>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.div1</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: blue;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.div2</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: green;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>



<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019101721906.png" alt="image-20211019101721906" style="zoom:50%;border: solid" />    



<h2 id="18-6-绝对定位"><a href="#18-6-绝对定位" class="headerlink" title="18,6 绝对定位"></a>18,6 绝对定位</h2><p>绝对定位是指在元素移动的时候给 , 根据 <strong>祖先元素</strong> 来进行定位的</p>
<p>语法 :</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">position</span>: absolute;</span><br></pre></td></tr></table></figure>

<ul>
<li><p><strong>绝对定位的特点</strong></p>
<ul>
<li><p>如果没有 <strong>祖先元素</strong> 或者 <strong>祖先元素没有定位属性</strong> , 会以浏览器为基准进行移动</p>
</li>
<li><p>如果祖先元素 (相对 , 绝对 , 固定) , 会按照最近一级的拥有定位属性的祖先元素为参考点进行移动</p>
<p>如果父级有就按照父级为基准 , 如果父级没有 , 就找父级的上级 , 知道找到位置 , 如果都没有 按照浏览器为基准</p>
</li>
</ul>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.father</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#55aaff</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0px</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.son</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#aa00ff</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019103131977.png" alt="image-20211019103131977"></p>
<ul>
<li>绝对定位不占有原先的位置 ( <strong>脱标</strong> )</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.father</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#55aaff</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0px</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.son</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#aa00ff</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bro</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#aa0000</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;bro&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019135545089.png" alt="image-20211019135545089" style="zoom:50%;" />    



<h2 id="18-7-子绝父相"><a href="#18-7-子绝父相" class="headerlink" title="18,7 子绝父相"></a>18,7 子绝父相</h2><p>所谓的子绝父相 , 就是当子元素拥有绝对定位属性的时候 , 父元素要使用相对定位的属性</p>
<ul>
<li>子元素使用绝对定位的时候不会占有原先位置 , 可以防止父元素任意一个位置 , 不会影响其他的盒子</li>
<li>父元素需要加入<strong>定位的属性限制子元素</strong>在父元素中显示</li>
<li>父元素在网页布局的时候需要占有原先的位置 , 不可以使用绝对定位 , 因为会使父元素脱标整体的布局会收到影响 , 所以只能使用相对</li>
</ul>
<p>==特殊情况 : 子绝父绝==</p>
<h2 id="18-8-固定定位"><a href="#18-8-固定定位" class="headerlink" title="18,8 固定定位"></a>18,8 固定定位</h2><p>作用 : 将拥有固定定位属性的元素 , <strong>固定在网页中的可视位置</strong> , 在浏览器滚动的时候元素的位置不变</p>
<p>语法 :</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">position</span>: fixed;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.large</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">1800px</span>;</span><br><span class="line">    <span class="attribute">margin-left</span>: auto;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#55AAFF</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.support</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: fixed;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">15px</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">450px</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: beige;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid gainsboro;</span><br><span class="line">    <span class="attribute">font</span>: <span class="number">25px</span>/<span class="number">2</span> <span class="string">&quot;微软雅黑&quot;</span>;</span><br><span class="line">    <span class="attribute">text-align</span>: center;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;large&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;support&quot;</span>&gt;</span>人工客服<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019141648570.png" alt="image-20211019141648570" style="zoom:30%;" />    



<p>**固定定位的特点 : **</p>
<ol>
<li>以浏览器的可视窗口作为参照物</li>
<li>和父元素的位置没有任何关系</li>
<li>不会随之内容和滚动条的移动而移动</li>
<li><strong>固定定位不会占有原先的位置</strong></li>
</ol>
<ul>
<li><strong>固定定位的小技巧 : 固定在版心右侧</strong></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#content</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">960px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: lightsalmon;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">0px</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#nav</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#55AAFF</span>;</span><br><span class="line">    <span class="comment">/* 将盒子定位到版心一半 */</span></span><br><span class="line">    <span class="attribute">position</span>: fixed;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">70%</span>;</span><br><span class="line">    <span class="comment">/* 移动至版心内容宽度的一半 */</span></span><br><span class="line">    <span class="attribute">margin-left</span>: <span class="number">480px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;nav&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#video&quot;</span>&gt;</span>港剧时代<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#film&quot;</span>&gt;</span>电影时代<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;#music&quot;</span>&gt;</span>音乐时代<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;content&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">id</span>=<span class="string">&quot;video&quot;</span>&gt;</span>港剧时代<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    ........</span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">id</span>=<span class="string">&quot;film&quot;</span>&gt;</span>电影时代<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    ........</span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">id</span>=<span class="string">&quot;music&quot;</span>&gt;</span>音乐时代<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019145119468.png" alt="image-20211019145119468"></p>
<h2 id="18-9-粘性定位"><a href="#18-9-粘性定位" class="headerlink" title="18,9 粘性定位"></a>18,9 粘性定位</h2><p>和固定定位比较像 , 都是将元素限制在浏览器的可视窗口的区域中</p>
<p>粘性定位可以在这区域中跟随鼠标移动</p>
<p>语法 : </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">position</span>: sticky;</span><br></pre></td></tr></table></figure>

<p>**特点 : **</p>
<ul>
<li>以浏览器的可视窗口为参照移动元素 (固定定位)</li>
<li>粘性定位会 <strong>占有原有位置</strong> (相对定位)</li>
<li>必须添加 top , left , right , bottom</li>
</ul>
<p>问题 : 兼容性不好 , IE不好使</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#nav</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">960px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#aaaaff</span>;</span><br><span class="line">    <span class="attribute">position</span>: sticky;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">200px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;nav&quot;</span>&gt;</span>我是一个导航栏<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">&quot;height: 2000px;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019151041509.png" alt="image-20211019151041509"></p>
<h2 id="18-10-定位的叠放次序"><a href="#18-10-定位的叠放次序" class="headerlink" title="18,10 定位的叠放次序"></a>18,10 定位的叠放次序</h2><p>属性 : <strong>z-index</strong></p>
<p><strong>控制拥有定位属性的元素 , 的叠放次序</strong></p>
<p>语法 :</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">z-index</span>: <span class="number">1</span>;</span><br></pre></td></tr></table></figure>

<ul>
<li> 属性值可以是正整数 , 负数或者 0 , 默认是 auto , 数值越大 , 盒子越往上</li>
<li> 如果属性值相同 , 按照书写的顺序来 , 后来者居上</li>
</ul>
<p><strong>注意点 :</strong></p>
<ul>
<li>数字后面不可以有单位</li>
<li>只有拥有定位属性的盒子才可以操作该属性</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123; </span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box1</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#FF0000</span>;</span><br><span class="line">    <span class="attribute">z-index</span>: -<span class="number">1</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#008000</span>;</span><br><span class="line">    <span class="attribute">z-index</span>: <span class="number">1</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box3</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">100px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box1 box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2 box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box3 box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019152358399.png" alt="image-20211019152358399">    </p>
<h1 id="19-定位的扩展"><a href="#19-定位的扩展" class="headerlink" title="19, 定位的扩展"></a>19, 定位的扩展</h1><p>绝对定位和固定定位某些效果和浮动是类似的</p>
<ul>
<li><strong>行内元素添加绝对定位和固定定位的时候 , 可以直接指定宽高</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>行内元素添加绝对定位和固定定位的时候 , 可以直接指定宽高<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;content&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">style</span>=<span class="string">&quot;position: absolute; width: 150px; height: 150px; </span></span></span><br><span class="line"><span class="string"><span class="tag">    background-color: blue;&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019160244379.png" alt="image-20211019160244379" style="zoom:50%;" />    



<ul>
<li><strong>块级元素在没有定位的时候默认宽度和浏览器 , 如果加入绝对定位属性 , 默认和内容同宽</strong></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#AAAAFF</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>块级元素在没有定位的时候默认宽度和浏览器 , 如果加入定位属性 , 默认和内容同宽<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;content&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span>我是class属性值为box的div标签<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019160302527.png" alt="image-20211019160302527" style="zoom:50%;" />    



<ul>
<li><strong>脱标的盒子是不会触发外边距合并</strong></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box1</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">250px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#008000</span>;</span><br><span class="line">    <span class="attribute">margin-top</span>: <span class="number">50px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>脱标的盒子是不会触发外边距合并<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;content&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box1&quot;</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019160402593.png" alt="image-20211019160402593" style="zoom:50%;" />    

<ul>
<li><strong>绝对定位 ( 固定定位 )会完全压住盒子的内容</strong></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.div</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="comment">/* float: left; */</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#AAAAFF</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>绝对定位 ( 固定定位 )会完全压住盒子的内容<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;content&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div&quot;</span>&gt;</span>我是一个div标签<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>曾经沧海难为水,除却巫山不是云.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019160442413.png" alt="image-20211019160442413" style="zoom:50%;" />    



<p>切换会浮动后 , <strong>浮动的元素只会压住标准流的盒子 , 但是不会覆盖住盒子的内容</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.div</span> &#123;</span><br><span class="line">    <span class="comment">/* position: absolute; */</span></span><br><span class="line">    <span class="attribute">float</span>: left;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#AAAAFF</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019160635065.png" alt="image-20211019160635065" style="zoom:50%;" />    

<p><strong>==浮动之所以不会压住文字 , 因为浮动产生初衷是为了做文字环绕效果的==</strong></p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019160801734.png" alt="image-20211019160801734" style="zoom:50%;" />    



<h1 id="20-元素的显示和隐藏"><a href="#20-元素的显示和隐藏" class="headerlink" title="20, 元素的显示和隐藏"></a>20, 元素的显示和隐藏</h1><p>很多的网页中 , 广告 , 提示框 , 在我们点击关闭的时候就消失流 , 再次新网页的时候就会出现</p>
<p><strong>本质 : 让一个元素隐藏起来</strong></p>
<ul>
<li>display</li>
<li>visibility</li>
<li>overflow</li>
</ul>
<h2 id="20-1-display"><a href="#20-1-display" class="headerlink" title="20,1 display"></a>20,1 display</h2><p>display 属性用于设置一个元素如何显示的</p>
<ul>
<li>none : 隐藏对象</li>
<li>block : 显示元素</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box1</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: none;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#008000</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box1 box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2 box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019161903877.png" alt="image-20211019161903877" style="zoom:67%;" />    

<p><strong>通过 display: none; 隐藏元素之后 , 不在占有原先的位置</strong></p>
<h2 id="20-2-visibility"><a href="#20-2-visibility" class="headerlink" title="20,2 visibility"></a>20,2 visibility</h2><p>作用 : 指定一元素的可见性</p>
<ul>
<li>hidden : 元素隐藏</li>
<li>visible : 元素可见</li>
</ul>
<p><strong>通过 visibility 隐藏元素 , 虽然元素看不见了 , 但是依旧占有原先的位置</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box1</span> &#123;</span><br><span class="line">    <span class="attribute">visibility</span>: hidden;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#008000</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box1 box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2 box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>



<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019162146876.png" alt="image-20211019162146876" style="zoom:50%;" />    





<h2 id="20-3-overflow"><a href="#20-3-overflow" class="headerlink" title="20,3 overflow"></a>20,3 overflow</h2><p>作用 : 定义了元素中的内容如果超出了元素边框的范围 , 内容会如何显示 ( 显示 &amp; 隐藏 )</p>
<p>属性值 : </p>
<ul>
<li>visible : 显示溢出的内容 (==默认值==)</li>
<li>hidden : 隐藏溢出的部分</li>
<li>scroll : 溢出部分显示滚动条</li>
<li>auto : 适配滚动 , 如果内容移除显示滚动条 , 如果内容没有溢出不显示滚动条</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;info&quot;</span>&gt;</span></span><br><span class="line">    1981年出演电影处女作《彩云曲》。1983年主演的武侠剧《神雕侠侣》在香港取得62点的收视纪录</span><br><span class="line">    [1-2]  。1985年发行首张个人专辑《只知道此刻爱你》 [11]  。1990年凭借专辑《可不可以》</span><br><span class="line">    在歌坛获得关注 [12]  。1991年创办天幕电影公司 [3]  。1994年获得十大劲歌金曲最受欢迎男</span><br><span class="line">    歌星奖；同年担任剧情片《天与地》的制片人 [4]  。1995年在央视春晚上演唱其代表作《忘情水》</span><br><span class="line">    [13]  。2000年凭借警匪片《暗战》获得金像奖最佳男主角奖 [5]  ；同年被《吉尼斯世界纪录大</span><br><span class="line">    全》评为获奖最多的香港男歌手 [14]  。2004年凭借剧情片《大块头有大智慧》获得金像奖最佳男</span><br><span class="line">    主角奖 [271]  ；同年凭借警匪片《无间道3：终极无间》获得金马奖最佳男主角奖 [6]  ；同年第</span><br><span class="line">    六次获得十大劲歌金曲最受欢迎男歌星奖。2005年获得香港UA院线颁发的全港最高累积票房香港男演</span><br><span class="line">    员奖 [7]  。2006年获得釜山国际电影节亚洲最有贡献电影人奖 [8]  。2012年凭借剧情片《桃姐》</span><br><span class="line">    获得金马奖、金像奖最佳男主角奖 [9]  ；同年担任第49届台湾电影金马奖评审团主席 [10]  。20</span><br><span class="line">    15年第5次登上央视春晚并演唱歌曲《回家的路》 [15]  。2020年发行个人首张数字专辑《演·唱》 [261]  。</span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>visible</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#info</span> &#123;</span><br><span class="line">    <span class="attribute">overflow</span>: visible;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">350px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">350px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#0000FF</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019164547965.png" alt="image-20211019164547965" style="zoom:50%;" />    

<p>hidden</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#info</span> &#123;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">350px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">350px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#0000FF</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019164610364.png" alt="image-20211019164610364" style="zoom:50%;" />    

<p>scroll</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#info</span> &#123;</span><br><span class="line">    <span class="attribute">overflow</span>: scroll;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">350px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">350px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#0000FF</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019164703407.png" alt="image-20211019164703407" style="zoom:50%;" />    

<p>auto</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#info</span> &#123;</span><br><span class="line">    <span class="attribute">overflow</span>: auto;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">350px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">350px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#0000FF</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019164834399.png" alt="image-20211019164834399" style="zoom:50%;" />    

<p>在实际开发中 , 绝大多数情况下我们不想让移除的内容显示出来的 , 因为溢出的部分会影响布局</p>
<h1 id="21-精灵图"><a href="#21-精灵图" class="headerlink" title="21, 精灵图"></a>21, 精灵图</h1><h2 id="21-1-为什么使用精灵图"><a href="#21-1-为什么使用精灵图" class="headerlink" title="21,1 为什么使用精灵图"></a>21,1 为什么使用精灵图</h2><p>网页资源是放在服务器中 , 受到网速的影响加载图片的速度比较慢 , 所以我们会讲图片变得小一些以便访问的时候加载的速度更快</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019170134828.png" alt="image-20211019170134828"></p>
<p><strong>==精灵图作用 : 为了有效的减少服务器接收请求和发送响应的次数 , 提高页面的加载效率==</strong> </p>
<p>精灵图 : CSS sprites , CSS 雪碧</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">45px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">45px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#55AAFF</span>;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bgi1</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">img/index-spr.png</span>) no-repeat -<span class="number">557px</span> -<span class="number">176px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bgi2</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">img/index-spr.png</span>) no-repeat -<span class="number">583px</span> -<span class="number">251px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bgi3</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">img/index-spr.png</span>) no-repeat -<span class="number">538px</span> -<span class="number">251px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bgi4</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">img/index-spr.png</span>) no-repeat -<span class="number">493px</span> -<span class="number">250px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.bgi5</span> &#123;</span><br><span class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(<span class="string">img/index-spr.png</span>) no-repeat -<span class="number">357px</span> -<span class="number">314px</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box bgi1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box bgi2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box bgi3&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box bgi4&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box bgi5&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211019172136843.png" alt="image-20211019172136843" style="zoom:50%;" />    

<p><strong>精灵图的核心</strong></p>
<ol>
<li>主要针对背景图片使用 , 把多个小背景图整合到一张大图中区</li>
<li>通过操作 background-position 属性值 , 让精灵图移动</li>
<li>移动的距离就是图片的 x 和 y 轴的坐标 , 一般情况下都是向上或者向下 , 所以数值都是负值</li>
</ol>
<h1 id="22-字体图标"><a href="#22-字体图标" class="headerlink" title="22, 字体图标"></a>22, 字体图标</h1><h2 id="22-1-字体图标的产生"><a href="#22-1-字体图标的产生" class="headerlink" title="22,1 字体图标的产生"></a>22,1 字体图标的产生</h2><p>对比精灵图 : </p>
<ol>
<li>图片文件相对于文字所占空间是比较大的</li>
<li>图片本省放大和缩小会造成失真 , 但是文字的大小不会影响文字的显示效果</li>
<li>一旦图片制作完毕要更换是比较负责的 , 但是文字可以随意更换</li>
</ol>
<h2 id="22-2-字体图标的优势"><a href="#22-2-字体图标的优势" class="headerlink" title="22,2 字体图标的优势"></a>22,2 字体图标的优势</h2><ul>
<li>轻量级 : 一个字体图标要比图片小很多 , 一旦网页中字体被加载了 , 图标马上就回出来</li>
<li>灵活性 : 本质是文字 , 所以产生阴影 , 改变颜色 , 旋转 , 透明效果 </li>
<li>兼容性 : 几乎支持所有的浏览器</li>
</ul>
<p><strong>注意 : 字体图标不能完全代替精灵图 , 复杂的图片字体是无法完成的</strong></p>
<ol>
<li>如果遇到一些结构和样式比较简单的小图标 , 使用字体图标</li>
<li>如果遇到一些结构和样式比较复杂的小图标 , 使用精灵图</li>
</ol>
<h2 id="22-3-字体图标的下载"><a href="#22-3-字体图标的下载" class="headerlink" title="22,3 字体图标的下载"></a>22,3 字体图标的下载</h2><p>网站 : <a target="_blank" rel="noopener" href="http://icomoon.io/">http://icomoon.io</a></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020081708511.png" alt="image-20211020081708511"></p>
<p><strong>选择图标</strong></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020082227243.png" alt="image-20211020082227243"></p>
<p><strong>编辑图标</strong></p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020082419081.png" alt="image-20211020082419081" style="zoom:50%;" />    

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020082516939.png" alt="image-20211020082516939" style="zoom:50%;" />    

<p><strong>创建图标</strong></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020082638964.png" alt="image-20211020082638964"></p>
<p><strong>下载图标</strong></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020082728122.png" alt="image-20211020082728122"></p>
<h2 id="22-4-字体图标的引入"><a href="#22-4-字体图标的引入" class="headerlink" title="22,4 字体图标的引入"></a>22,4 字体图标的引入</h2><ul>
<li><strong>将字体图标文件中 fonts 文件夹复制到项目中</strong></li>
</ul>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020084450775.png" alt="image-20211020084450775"></p>
<ul>
<li><strong>在HTML页面中引入 , 字体图标文件中 style.css 的第一段代码</strong></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">&#x27;icomoon&#x27;</span>;</span><br><span class="line">  <span class="attribute">src</span>:  <span class="built_in">url</span>(<span class="string">&#x27;fonts/icomoon.eot?ir015b&#x27;</span>);</span><br><span class="line">  <span class="attribute">src</span>:  <span class="built_in">url</span>(<span class="string">&#x27;fonts/icomoon.eot?ir015b#iefix&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;embedded-opentype&#x27;</span>),</span><br><span class="line">    <span class="built_in">url</span>(<span class="string">&#x27;fonts/icomoon.ttf?ir015b&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;truetype&#x27;</span>),</span><br><span class="line">    <span class="built_in">url</span>(<span class="string">&#x27;fonts/icomoon.woff?ir015b&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;woff&#x27;</span>),</span><br><span class="line">    <span class="built_in">url</span>(<span class="string">&#x27;fonts/icomoon.svg?ir015b#icomoon&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;svg&#x27;</span>);</span><br><span class="line">  <span class="attribute">font-weight</span>: normal;</span><br><span class="line">  <span class="attribute">font-style</span>: normal;</span><br><span class="line">  <span class="attribute">font-display</span>: block;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020084658983.png" alt="image-20211020084658983"></p>
<ul>
<li><strong>使用字体图标</strong></li>
</ul>
<p>使用字图标要通过一个特殊字符 , 在字体图标的demo.html中找</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020084847154.png" alt="image-20211020084833659" style="zoom:50%;" />    <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020084900092.png" alt="image-20211020084900092" style="zoom:50%;" /></p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">&quot;utf-8&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">&quot;stylesheet&quot;</span> <span class="attr">type</span>=<span class="string">&quot;text/css&quot;</span> <span class="attr">href</span>=<span class="string">&quot;css/icon.css&quot;</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>css</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line">  <span class="attribute">font-family</span>: <span class="string">&#x27;icomoon&#x27;</span>;</span><br><span class="line">  <span class="attribute">src</span>:  <span class="built_in">url</span>(<span class="string">&#x27;../fonts/icomoon.eot?ir015b&#x27;</span>);</span><br><span class="line">  <span class="attribute">src</span>:  <span class="built_in">url</span>(<span class="string">&#x27;../fonts/icomoon.eot?ir015b#iefix&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;embedded-opentype&#x27;</span>),</span><br><span class="line">	<span class="built_in">url</span>(<span class="string">&#x27;../fonts/icomoon.ttf?ir015b&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;truetype&#x27;</span>),</span><br><span class="line">	<span class="built_in">url</span>(<span class="string">&#x27;../fonts/icomoon.woff?ir015b&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;woff&#x27;</span>),</span><br><span class="line">	<span class="built_in">url</span>(<span class="string">&#x27;../fonts/icomoon.svg?ir015b#icomoon&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;svg&#x27;</span>);</span><br><span class="line">  <span class="attribute">font-weight</span>: normal;</span><br><span class="line">  <span class="attribute">font-style</span>: normal;</span><br><span class="line">  <span class="attribute">font-display</span>: block;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">span</span> &#123;</span><br><span class="line">	<span class="comment">/* 指定字体的样式是字体图标系列 */</span></span><br><span class="line">	<span class="attribute">font-family</span>: <span class="string">&#x27;icomoon&#x27;</span>;</span><br><span class="line">	<span class="attribute">font-size</span>: <span class="number">50px</span>;</span><br><span class="line">	<span class="attribute">color</span>: dodgerblue;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">span</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">	<span class="attribute">color</span>: aqua;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020090420159.png" alt="image-20211020090420159">    </p>
<h2 id="22-5-字体图标追加"><a href="#22-5-字体图标追加" class="headerlink" title="22,5 字体图标追加"></a>22,5 字体图标追加</h2><p>如果字体图标不够用了 , 需要新郑一部分</p>
<p>需要将文件夹中的 <strong>selection.json</strong> 文件重新上传 , 然后选中需要新增的图标 , 重新下载 , 替换原有的文件即可</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020091154905.png" alt="image-20211020091154905"></p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020091252888.png" alt="image-20211020091252888" style="zoom:50%;" />    

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020091318212.png" alt="image-20211020091318212"></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020091459891.png" alt="image-20211020091459891"></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020091554786.png" alt="image-20211020091554786"></p>
<p><strong>更新字体资源</strong></p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020092159479.png" alt="image-20211020092159479">    </p>
<h1 id="23-CSS三角"><a href="#23-CSS三角" class="headerlink" title="23, CSS三角"></a>23, CSS三角</h1><p>本质 : 利用盒子的边框</p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020124328562.png" alt="image-20211020124328562" style="zoom:80%;" />    



<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.father</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#1E90FF</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.son</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">60px</span>;</span><br><span class="line">    <span class="attribute">right</span>: -<span class="number">20px</span>;</span><br><span class="line">    <span class="comment">/* 将4个边框颜色全部变为透明色 */</span></span><br><span class="line">    <span class="attribute">border</span>: <span class="number">10px</span> solid transparent;</span><br><span class="line">    <span class="comment">/* 将左边框添加颜色(层叠性) */</span></span><br><span class="line">    <span class="attribute">border-left</span>: <span class="number">10px</span> solid <span class="number">#1E90FF</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;son&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020125128676.png" alt="image-20211020125128676" style="zoom:50%;" />    



<h1 id="24-CSS用户属性"><a href="#24-CSS用户属性" class="headerlink" title="24, CSS用户属性"></a>24, CSS用户属性</h1><ul>
<li><p><strong>鼠标样式 : cursor</strong></p>
<p><strong>属性</strong></p>
<ul>
<li>defult : 正常的鼠标</li>
<li>pointer : 小手</li>
<li>move : 移动 , 十字花</li>
<li>text : 文本</li>
<li>not-allowed : 禁止</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">&quot;cursor: default;&quot;</span>&gt;</span>我是默认样式鼠标箭头<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">&quot;cursor: pointer;&quot;</span>&gt;</span>我是鼠标手指样式<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">&quot;cursor: move;&quot;</span>&gt;</span>我是鼠标移动样式<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">&quot;cursor: text;&quot;</span>&gt;</span>我是鼠标文本样式<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">style</span>=<span class="string">&quot;cursor: not-allowed;&quot;</span>&gt;</span>我是鼠标禁止样式<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>



<ul>
<li><p><strong>轮廓线 : outline</strong></p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020130144629.png" alt="image-20211020130144629" style="zoom:50%;" />    

<p>所有的文本框都会有一个轮廓线 , 不是边框 , 当鼠标的光标进入这个文本框之后 , 轮廓线就会出现</p>
<p><strong>将属性值调整成 none , 或者 0</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">input</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#1E90FF</span>;</span><br><span class="line">    <span class="attribute">outline</span>: <span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;username&quot;</span> <span class="attr">id</span>=<span class="string">&quot;un&quot;</span> <span class="attr">placeholder</span>=<span class="string">&quot;请输入用户名...&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020130413504.png" alt="image-20211020130413504" style="zoom:50%;" />    </li>
</ul>
<ul>
<li><p><strong>文本域防拖拽 : resize</strong></p>
<p>在实际可发过程中 , 文本域是不可以摆用户肆意拖拽的 , 因为影响网页的布局</p>
<p>通过设置属性值为 <strong>resize: none;</strong> 来解决这个问题</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">textarea</span> &#123;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">3px</span> solid <span class="number">#1E90FF</span>;</span><br><span class="line">    <span class="attribute">outline</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">&#x27;微软雅黑&#x27;</span>;</span><br><span class="line">    <span class="attribute">resize</span>: none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">textarea</span> <span class="attr">rows</span>=<span class="string">&quot;10&quot;</span> <span class="attr">cols</span>=<span class="string">&quot;30&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020131003348.png" alt="image-20211020131003348" style="zoom:50%;" />    </li>
</ul>
<h1 id="25-vertical-align"><a href="#25-vertical-align" class="headerlink" title="25, vertical-align"></a>25, vertical-align</h1><h2 id="25-1-vertical-align使用"><a href="#25-1-vertical-align使用" class="headerlink" title="25,1 vertical-align使用"></a>25,1 vertical-align使用</h2><p>CSS 的 vertical-align 的使用场景 , 用于设置图片 , 表单 ( 行内块 ) 和 文字元素的垂直对齐方式</p>
<p><strong>官方解释</strong> : 用于设置一个元素的 <strong>垂直对齐方式</strong> , 但是它是针对与行内元素和行内块元素有效的</p>
<p><strong>属性值 :</strong></p>
<ul>
<li>top : 让元素的顶端对齐 , 按照行内高度最高的元素顶端</li>
<li>middle : 让元素位于父元素垂直居中的位置</li>
<li>bottom : 让元素基于底线对齐</li>
<li>baseline : 让元素基于基线对齐</li>
</ul>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021075016352.png" alt="image-20211021075016352"></p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.ver</span> &#123;</span><br><span class="line">    <span class="attribute">vertical-align</span>: top;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">textarea</span> &#123;</span><br><span class="line">    <span class="attribute">vertical-align</span>: top;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>我是一个h1标题g<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">class</span>=<span class="string">&quot;ver&quot;</span> <span class="attr">src</span>=<span class="string">&quot;img/tutu.jpg&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>我是一个span标签<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span><br><span class="line">自我介绍:</span><br><span class="line"><span class="tag">&lt;<span class="name">textarea</span> <span class="attr">rows</span>=<span class="string">&quot;10&quot;</span> <span class="attr">cols</span>=<span class="string">&quot;30&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020153359622.png" alt="image-20211020153359622" style="zoom:50%;border: solid" />    



<ul>
<li><p><strong>图片底部距离父元素的间隙问题</strong></p>
<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020153618698.png" alt="image-20211020153618698" style="zoom:50%;" />    

<p>图片底部和父元素底部边框存在空白的间隙</p>
<p>原因 : 图片底部默认和文字的基线对齐 , 虽有和底线产生了距离</p>
<p>解决方案 : </p>
<ol>
<li>尽量不要让图片基线对齐</li>
<li>将图片转换为块级元素</li>
</ol>
</li>
</ul>
<h1 id="26-多出文本省略号显示"><a href="#26-多出文本省略号显示" class="headerlink" title="26, 多出文本省略号显示"></a>26, 多出文本省略号显示</h1><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020142008312.png" alt="image-20211020142008312" style="zoom:50%;" />    

<h2 id="26-1-单行文字省略号"><a href="#26-1-单行文字省略号" class="headerlink" title="26,1 单行文字省略号"></a>26,1 单行文字省略号</h2><p><strong>满足三个条件</strong></p>
<ol>
<li><p>强制一行内显示</p>
<p>属性 : <strong>white-space</strong></p>
<ul>
<li>normal</li>
<li>nowrap : 强制文字在一行中显示</li>
</ul>
</li>
<li><p>超出部分隐藏</p>
</li>
<li><p>文字省略部分用省略号代替</p>
</li>
</ol>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">160px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#1E90FF</span>;</span><br><span class="line">    <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>我欲乘风归去,又恐琼楼玉宇.<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020142624050.png" alt="image-20211020142624050" style="zoom:50%;" />    



<h2 id="26-2-多行文字省略号"><a href="#26-2-多行文字省略号" class="headerlink" title="26,2 多行文字省略号"></a>26,2 多行文字省略号</h2><p>多行文本显示省略号 , 有较大的兼容性问题 , 适合用于一 webkit 为内核的浏览器 , 比如谷歌浏览器 , IE 就不行</p>
<p>超出的行数也会被显示 , 通过控制盒子的高度讲多余的内容隐藏掉</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">46px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#ff6176</span>;</span><br><span class="line">    <span class="comment">/* 1,溢出隐藏 */</span></span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">    <span class="comment">/* 2,文字溢出部分的显示 */</span></span><br><span class="line">    <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">    <span class="comment">/* 3,设定盒子的显示模式为弹性伸缩盒子 */</span></span><br><span class="line">    <span class="attribute">display</span>: -webkit-box;</span><br><span class="line">    <span class="comment">/* 4,限制一个块元素文本行数 */</span></span><br><span class="line">    -webkit-line-clamp: <span class="number">2</span>;</span><br><span class="line">    <span class="comment">/* 5,设置伸缩盒子的子元素的排列对齐方式 */</span></span><br><span class="line">    -webkit-box-orient: vertical;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>壮志饥餐胡虏肉,笑谈渴饮匈奴血.待从头,收拾旧山河,朝天阙.<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020145608412.png" alt="image-20211020145608412" style="zoom:67%;border: solid" />    





<h1 id="27-CSS-3"><a href="#27-CSS-3" class="headerlink" title="27, CSS 3"></a>27, CSS 3</h1><ul>
<li>新增的 CSS3 特性有兼容性问题 , ie9+</li>
<li>新增一些选择器</li>
<li>新增盒子模型</li>
<li>新增属性</li>
</ul>
<h1 id="28-CSS3新增选择器"><a href="#28-CSS3新增选择器" class="headerlink" title="28, CSS3新增选择器"></a>28, CSS3新增选择器</h1><h2 id="28-1-属性选择器"><a href="#28-1-属性选择器" class="headerlink" title="28,1 属性选择器"></a>28,1 属性选择器</h2><p>==有了属性选择器 , 我们可以不借助id或者类来选择指定的元素==</p>
<table>
<thead>
<tr>
<th>选择符</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>E[att]</td>
<td>选择具有 att 属性的 E 元素</td>
</tr>
<tr>
<td>E[att=”val”]</td>
<td>选择具有 att 属性 , 且属性值为 val 的 E 元素</td>
</tr>
<tr>
<td>E[att^=”val”]</td>
<td>选择具有 att 属性 , 且属性值以 val 开头的 E 元素</td>
</tr>
<tr>
<td>E[att$=”val”]</td>
<td>选择具有 att 属性 , 且属性值以 val 结尾的 E 元素</td>
</tr>
<tr>
<td>E[att*=”val”]</td>
<td>选择具有 att 属性 , 且属性值包含 val 的 E 元素</td>
</tr>
</tbody></table>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 选中拥有value属性的元素指定样式 */</span></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[value]</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: blue;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 选中拥有type属性且属性值为password 的元素指定样式 */</span></span><br><span class="line"><span class="selector-tag">input</span><span class="selector-attr">[type=password]</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#FF4500</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 选中class属性值开头是icon的div元素,指定样式 */</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-attr">[class^=icon]</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: orangered;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 选中class属性值结尾是info的div元素,指定样式 */</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-attr">[class$=info]</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: green;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 选中class属性值包含msg的div元素,指定样式 */</span></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-attr">[class*=msg]</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: gold;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>匹配属性<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">value</span>=<span class="string">&quot;张三&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>匹配属性值<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;password&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>匹配属性值开头的内容<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;icon1&quot;</span>&gt;</span>小图标1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;icon2&quot;</span>&gt;</span>小图标2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;icon3&quot;</span>&gt;</span>小图标3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;icon4&quot;</span>&gt;</span>小图标4<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>此处省略10000字<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>匹配属性值的结尾内容<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;data-first-info&quot;</span>&gt;</span>数据信息1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;data-second-info&quot;</span>&gt;</span>数据信息2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;info-logo&quot;</span>&gt;</span>图标信息<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h3</span>&gt;</span>匹配属性值包含的内容<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;main-info-msg&quot;</span>&gt;</span>主体信息数据<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;nav-msg-title&quot;</span>&gt;</span>导航信息标题<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;msg-footer&quot;</span>&gt;</span>信息标题底部<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020152319237.png" alt="image-20211020152319237" style="zoom:50%;border: solid" />    



<p><strong>注意 : 类选择器 , 属性选择器 , 伪类选择器权重都是 10</strong></p>
<h2 id="28-2-伪元素选择器-重点"><a href="#28-2-伪元素选择器-重点" class="headerlink" title="28,2 伪元素选择器 (==重点==)"></a>28,2 伪元素选择器 (==重点==)</h2><p>伪元素选择器办我们利用 CSS 创建新的标签 / 元素 , 不需要编写 HTML 标签 , 起到简化 HTML 结构的作用</p>
<table>
<thead>
<tr>
<th>选择符</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>::before</td>
<td>在元素的内容前插入</td>
</tr>
<tr>
<td>::after</td>
<td>在元素的内容后插入</td>
</tr>
</tbody></table>
<p><strong>注意 :</strong></p>
<ul>
<li><p><strong>before</strong> 和 <strong>after</strong> 创建的元素都是行内元素</p>
</li>
<li><p>新创建的元素在 HTML 文档中找不到 , 所以我们称之为 <strong>伪元素</strong></p>
</li>
<li><p>语法 : <strong>元素::before{  }</strong></p>
</li>
<li><p><strong>before</strong> 和 <strong>after</strong> 都必须要有 <strong>content属性</strong></p>
</li>
<li><p><strong>伪元素选择器</strong> 和 <strong>标签选择器</strong> 权重都是 1</p>
<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020154308554.png" alt="image-20211020154308554">    </p>
</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#1E90FF</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">::before</span> &#123;</span><br><span class="line">    <span class="comment">/* 可以通过display将这个元素转换为块级 */</span></span><br><span class="line">    <span class="attribute">display</span>: inline-block;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&quot;Hello~&quot;</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">80px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: yellow;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&quot;Back!&quot;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>welcome<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020161612125.png" alt="image-20211020161612125" style="zoom:50%;" />    



<ul>
<li><strong>伪元素使用案例</strong></li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">@font-face</span> &#123;</span><br><span class="line">    <span class="attribute">font-family</span>: <span class="string">&#x27;icomoon&#x27;</span>;</span><br><span class="line">    <span class="attribute">src</span>:  <span class="built_in">url</span>(<span class="string">&#x27;fonts/icomoon.eot?ir015b&#x27;</span>);</span><br><span class="line">    <span class="attribute">src</span>:  <span class="built_in">url</span>(<span class="string">&#x27;fonts/icomoon.eot?ir015b#iefix&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;embedded-opentype&#x27;</span>),</span><br><span class="line">        <span class="built_in">url</span>(<span class="string">&#x27;fonts/icomoon.ttf?ir015b&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;truetype&#x27;</span>),</span><br><span class="line">        <span class="built_in">url</span>(<span class="string">&#x27;fonts/icomoon.woff?ir015b&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;woff&#x27;</span>),</span><br><span class="line">        <span class="built_in">url</span>(<span class="string">&#x27;fonts/icomoon.svg?ir015b#icomoon&#x27;</span>) <span class="built_in">format</span>(<span class="string">&#x27;svg&#x27;</span>);</span><br><span class="line">    <span class="attribute">font-weight</span>: normal;</span><br><span class="line">    <span class="attribute">font-style</span>: normal;</span><br><span class="line">    <span class="attribute">font-display</span>: block;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">input</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">180px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">20px</span>;</span><br><span class="line">    <span class="attribute">outline</span>: <span class="number">0</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.icon</span>&#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.icon1</span><span class="selector-pseudo">::after</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: absolute;</span><br><span class="line">    <span class="attribute">right</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">5px</span>;</span><br><span class="line">    <span class="attribute">font</span>: <span class="number">16px</span> <span class="string">&#x27;icomoon&#x27;</span>;</span><br><span class="line">    <span class="attribute">color</span>: gainsboro;</span><br><span class="line">    <span class="attribute">content</span>: <span class="string">&#x27;&#x27;</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>用户邮箱<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span> <span class="attr">class</span>=<span class="string">&quot;icon icon1&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> /&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211020161743223.png" alt="image-20211020161743223">    </p>
<h2 id="28-3-结构伪类选择器"><a href="#28-3-结构伪类选择器" class="headerlink" title="28,3 结构伪类选择器"></a>28,3 结构伪类选择器</h2><p>作用 : 根据 <strong>文档结构</strong> 来选择元素 , 常用于父级选择器里的子级</p>
<table>
<thead>
<tr>
<th>选择器</th>
<th>简介</th>
</tr>
</thead>
<tbody><tr>
<td>E : first-child</td>
<td>匹配父元素中的第一个子元素 E</td>
</tr>
<tr>
<td>E : last-child</td>
<td>匹配父元素中的最后一个子元素 E</td>
</tr>
<tr>
<td>E : nth-child(n)</td>
<td>匹配父元素中的第 n 个子元素 E</td>
</tr>
<tr>
<td>E : first-of-type</td>
<td>匹配指定类型 E 的第一个</td>
</tr>
<tr>
<td>E : last-of-type</td>
<td>匹配指定类型 E 的最后一个</td>
</tr>
<tr>
<td>E : nth-of-type(n)</td>
<td>匹配指定类型 E 的第 n 个</td>
</tr>
</tbody></table>
<blockquote>
<p><strong>E : first-child , E : last-child , E : nth-child(n)</strong></p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 选中ul中的第一个 li 标签*/</span></span><br><span class="line"><span class="selector-tag">ul</span> <span class="selector-tag">li</span><span class="selector-pseudo">:first</span>-child &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: darkturquoise;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 选中ul中的最后一个 li 标签 */</span></span><br><span class="line"><span class="selector-tag">ul</span> <span class="selector-tag">li</span><span class="selector-pseudo">:last-child</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: goldenrod;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 选中ul中的第6个 li 标签 */</span></span><br><span class="line"><span class="selector-tag">ul</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(<span class="number">6</span>) &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: hotpink;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第1个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第2个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第3个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第4个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第5个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第6个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第7个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第8个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021081452611.png" alt="image-20211021081452611" style="zoom:50%;border: solid" />    



<ul>
<li><p><strong>nth-child(n)</strong> : n 可以是数字 , 关键字 , 公式</p>
<ul>
<li><p>如果是数字 , 就是选择第 n 个子元素 , 元素的位置从 1 开始计数</p>
</li>
<li><p><strong>n 的关键字 : even(偶数) , odd(奇数)</strong></p>
<p>隔行换色</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 选中ol中偶数位置的 li 标签 */</span></span><br><span class="line"><span class="selector-tag">ol</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(even) &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: gainsboro;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 选中ol中奇数位置的 li 标签 */</span></span><br><span class="line"><span class="selector-tag">ol</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(odd) &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: pink;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第1li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第2li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第3li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第4li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第5li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第6li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第7li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第8li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021082442804.png" alt="image-20211021082442804" style="zoom:50%;border: solid" />    </li>
</ul>
</li>
<li><p><strong>n 可以是公式</strong></p>
<p>如果 n 在公式中使用 , n从 0 开始计算 , 但是第0个元素或者是超出了元素个数的会被忽略掉</p>
<ul>
<li><strong>2n</strong> : 偶数</li>
<li><strong>2n+1</strong> : 奇数</li>
<li><strong>5n</strong> : 5 , 10 , 15 , 20</li>
<li><strong>n+5</strong> : 从第 5 个到最后一个</li>
<li><strong>-n+5</strong> : 从第 5 个到开头第 1 个</li>
</ul>
<blockquote>
<p>奇偶数</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">    通过公式选中ol中偶数位置的li标签</span></span><br><span class="line"><span class="comment">    2*0 , 2*1 , 2*2 , 2*3 .....</span></span><br><span class="line"><span class="comment">    0 , 2 , 4 , 6 </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="selector-tag">ol</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(<span class="number">2</span>n) &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#DAA520</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">    通过公式选中ol中奇数位置的li标签</span></span><br><span class="line"><span class="comment">    2*0+1 , 2*1+1 , 2*2+1 , 2*3+1 .....</span></span><br><span class="line"><span class="comment">    1 , 3 , 5 , 7 ....... </span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="selector-tag">ol</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(<span class="number">2</span>n+<span class="number">1</span>) &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#FF69B4</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021084429592.png" alt="image-20211021084429592" style="zoom:50%;border: solid" />    

<blockquote>
<p>n + ? , 从第几个开始</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">    通过公式选中第6个到最后一个元素 </span></span><br><span class="line"><span class="comment">    0+6 , 1+6 , 2+6 , 3+6</span></span><br><span class="line"><span class="comment">    6 , 7 , 8 , 9</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="selector-tag">ol</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(n+<span class="number">6</span>) &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#DAA520</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">    通过公式选中前5个</span></span><br><span class="line"><span class="comment">    -0+5,-1+5,-2+5,-3+5 ...</span></span><br><span class="line"><span class="comment">    5,4,3,2 ....</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="selector-tag">ol</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-child</span>(-n+<span class="number">5</span>) &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#FF69B4</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第1li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第2li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第3li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第4li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第5li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第6li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第7li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第8li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021085241588.png" alt="image-20211021085241588" style="zoom:50%;border: solid" />    </li>
</ul>
<blockquote>
<p>first-of-type , last-of-type , nth-of-type</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">ul</span> <span class="selector-tag">li</span><span class="selector-pseudo">:first</span>-of-type &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#DAA520</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ul</span> <span class="selector-tag">li</span><span class="selector-pseudo">:last-of-type</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#FF69B4</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ul</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-of-type</span>(<span class="number">3</span>) &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: palegreen;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第1个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第2个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第3个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第4个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第5个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第6个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第7个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第8个子元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021090308373.png" alt="image-20211021090308373" style="zoom:50%;border: solid" />    

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">ol</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-of-type</span>(even) &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: chocolate;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ol</span> <span class="selector-tag">li</span><span class="selector-pseudo">:nth-of-type</span>(<span class="number">2</span>n+<span class="number">1</span>) &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: goldenrod;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第1li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第2li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第3li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第4li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第5li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第6li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第7li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是ol中的第8li元素<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021090353680.png" alt="image-20211021090353680" style="zoom:50%;border: solid" />    



<ul>
<li><strong>nth-child 和 nth-of-type 的区别</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;father&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>我是第1个h3标签<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>我是第1个p标签<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>我是第2个h3标签<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>我是第2个p标签<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>我是第3个h3标签<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>我是第3个p标签<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">    无效果</span></span><br><span class="line"><span class="comment">    nth-child会将所有的子元素排列</span></span><br><span class="line"><span class="comment">    执行的时候会首先看 , 选择的是第几个子元素</span></span><br><span class="line"><span class="comment">	在看子元素是否存在</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="selector-class">.father</span> <span class="selector-tag">p</span><span class="selector-pseudo">:nth-child</span>(<span class="number">1</span>) &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: aqua;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/* </span></span><br><span class="line"><span class="comment">    有效果</span></span><br><span class="line"><span class="comment">    nth-of-type会将所有的子元素排列</span></span><br><span class="line"><span class="comment">    执行的时候回首先看是否存在指定的元素</span></span><br><span class="line"><span class="comment">    在看选中的第几个</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="selector-class">.father</span> <span class="selector-tag">p</span><span class="selector-pseudo">:nth-of-type</span>(<span class="number">1</span>) &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#DAA520</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021091555178.png" alt="image-20211021091555178" style="zoom:50%;border: solid" />    

<p><strong>总结 :</strong></p>
<ol>
<li>nth-child 对父元素中所有的子元素排序选择 (序号固定) , 先找第 n 个子元素 , 然后再判断是否和对应的元素匹配</li>
<li>nth-of-type 对父元素中指定的子元素进行排序选择 , 先去匹配元素 , 在更具元素找到第 n 个子元素</li>
</ol>
<h1 id="29-CSS3盒子模型"><a href="#29-CSS3盒子模型" class="headerlink" title="29, CSS3盒子模型"></a>29, CSS3盒子模型</h1><p><strong>box-sizing</strong> , 作用 : 改变计算盒子大小的形式</p>
<p><strong>属性值 :</strong> </p>
<ul>
<li><strong>content-box</strong> : 盒子的大小 width + border + padding(以前默认的)</li>
<li><strong>border-box</strong> : 盒子的大小 width</li>
</ul>
<p>如果设定属性值为 <strong>border-box</strong> , 那么 padding 和 border 不会改变原有盒子的大小 (前提 : padding 和 border 想加不会超过盒子)</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box1</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: green;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">20px</span> solid red;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="comment">/* 设置普通盒子 */</span></span><br><span class="line">    <span class="attribute">box-sizing</span>: content-box;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box2</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">150px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: green;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">20px</span> solid red;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">box-sizing</span>: border-box;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021092943808.png" alt="image-20211021092943808" style="zoom:50%;" />    



<h1 id="30-CSS3过渡-重点"><a href="#30-CSS3过渡-重点" class="headerlink" title="30, CSS3过渡 (==重点==)"></a>30, CSS3过渡 (==重点==)</h1><p>属性 : <strong>transition</strong></p>
<p>作用 : 在没有 flash 或者 JS 代码的情况下 , 让元素拥有动画的效果 (从一种状态切换至另一种状态)</p>
<p>==过渡动画通常和 hover 伪类选择器一同使用==</p>
<p>语法 : </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transition</span>: 过渡的属性 花费的时间 运动的曲线 何时开始;</span><br></pre></td></tr></table></figure>

<ul>
<li><p>过渡的属性 : </p>
<p>想要变化的 CSS 属性 , 宽度 , 高度 , 颜色 , 内外边距都可以 , 如果需要过渡所有的属性 , 可以写 <strong>all</strong> 来代替所有的属性名称</p>
</li>
<li><p>花费的时间 : 单位是秒 ( <strong>必须写单位</strong> ) , s , 比如 0.5s</p>
</li>
<li><p>运动的曲线 : 默认 ease (可以省略)</p>
<ul>
<li>ease : 渐慢</li>
<li>linear : 匀速</li>
<li>ease-in : 加速</li>
<li>ease-out : 减速</li>
<li>ease-in-out : 先加速后减速</li>
</ul>
</li>
<li><p>何时开始 : 触发元素状态切换的延迟时间 , 默认是0s (可以省略)</p>
</li>
</ul>
<p><strong>==过渡的效果是给谁加的 , 就将过渡的属性写在他的选择器里面==</strong></p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#box</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#008000</span>;</span><br><span class="line">    <span class="attribute">transition</span>: all <span class="number">1s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#box</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: blue;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021125556095.png" alt="image-20211021125556095" style="zoom:50%;" /> 鼠标经过后 <img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021125644331.png" alt="image-20211021125644331" style="zoom:50%;" /></p>
<ul>
<li>进度条案例</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.out</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="number">#FF0000</span>;</span><br><span class="line">    <span class="attribute">padding</span>: <span class="number">1px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.in</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100%</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#FF0000</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">transition</span>: all <span class="number">1s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.in</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;out&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;in&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021131623372.png" alt="image-20211021131623372">    </p>
<h1 id="31-CSS-2D转换"><a href="#31-CSS-2D转换" class="headerlink" title="31, CSS 2D转换"></a>31, CSS 2D转换</h1><p>转换 <strong>transform</strong></p>
<ul>
<li>移动 : <strong>translate</strong></li>
<li>旋转 : <strong>rotate</strong></li>
<li>缩放 : <strong>scale</strong></li>
</ul>
<h2 id="31-1-移动-translate"><a href="#31-1-移动-translate" class="headerlink" title="31,1 移动 translate"></a>31,1 移动 translate</h2><p>作用 : 改变元素在页面中的位置 , 类似于 <strong>定位</strong></p>
<p><strong>语法 :</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transform</span>: <span class="built_in">translate</span>(x,y);</span><br><span class="line"><span class="attribute">transform</span>: <span class="built_in">translateX</span>(n);</span><br><span class="line"><span class="attribute">transform</span>: <span class="built_in">translateY</span>(n);</span><br></pre></td></tr></table></figure>

<blockquote>
<p>代码s实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">    <span class="comment">/* </span></span><br><span class="line"><span class="comment">    转换之移动</span></span><br><span class="line"><span class="comment">    transform: translate(x,y)</span></span><br><span class="line"><span class="comment">    x代表图片横向移动的位置</span></span><br><span class="line"><span class="comment">    y代表图片纵向移动的位置</span></span><br><span class="line"><span class="comment">    */</span></span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translate</span>(<span class="number">100px</span>,<span class="number">100px</span>);</span><br><span class="line">    <span class="comment">/* 如果只需要移动横坐标 */</span></span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translateX</span>(<span class="number">100px</span>);</span><br><span class="line">    <span class="comment">/* 如果只需要移动纵坐标 */</span></span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translateY</span>(<span class="number">100px</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021132653399.png" alt="image-20211021132653399" style="zoom: 50%;border: solid" />    

<p><strong>重点 :</strong></p>
<ul>
<li>定义 2 D转换中的移动 , 沿着 X 和 Y 轴移动元素</li>
<li>translate 最大的优点就是不会影响其他元素 , 占有原先的位置 (不脱标)</li>
<li>translate 的百分比单位是针对与自身</li>
<li>对行内元素没有效果</li>
</ul>
<p><strong>通过移动属性 , 让盒子水平垂直居中</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.father</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">500px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: aquamarine;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.son</span> &#123;</span><br><span class="line">    <span class="attribute">position</span>: relative;</span><br><span class="line">    <span class="attribute">left</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">top</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">50px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>,-<span class="number">50%</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021135245900.png" alt="image-20211021135245900" style="zoom:50%;" />    



<h2 id="31-2-旋转-rotate"><a href="#31-2-旋转-rotate" class="headerlink" title="31,2 旋转 rotate"></a>31,2 旋转 rotate</h2><p>作用 : 让元素实现旋转的效果</p>
<p>语法 : </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transform</span>: <span class="built_in">rotate</span>(度数);</span><br></pre></td></tr></table></figure>

<p><strong>重点 :</strong></p>
<ul>
<li>rotate () 里面写的是旋转的度数 , 单位 deg 比如 rotate(45deg)</li>
<li>数值如果是整数顺时针 , 负数 , 逆时针</li>
<li>默认的旋转中心元素的中心</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">2px</span> solid pink;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">transition</span>: all .<span class="number">5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">img</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">3600deg</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;img/tutu.jpg&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021140850492.png" alt="image-20211021140850492" style="zoom:33%;" />    



<ul>
<li><p><strong>设置转换中心</strong></p>
<p>属性 : <strong>transform-origin</strong></p>
<p>语法 : </p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">transform-origin</span>: x y;</span><br></pre></td></tr></table></figure>

<ul>
<li>x 和 y 的默认值 50% , 元素的中心点</li>
<li>属性值的种类可以是 , 数值+px , 百分比 , 方位词 (top , bottom , left , right , center)</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">border</span>: <span class="number">2px</span> solid pink;</span><br><span class="line">    <span class="attribute">border-radius</span>: <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">transition</span>: all <span class="number">5s</span>;</span><br><span class="line">    <span class="attribute">transform-origin</span>: <span class="number">50%</span> <span class="number">50%</span>;</span><br><span class="line">    <span class="attribute">transform-origin</span>: right center;</span><br><span class="line">    <span class="attribute">transform-origin</span>: <span class="number">400px</span> <span class="number">400px</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">img</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">3600deg</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;img/tutu.jpg&quot;</span> /&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<h2 id="31-3-缩放-scale"><a href="#31-3-缩放-scale" class="headerlink" title="31,3 缩放 scale"></a>31,3 缩放 scale</h2><p>作用 : 控制元素的面积进行放大和缩小</p>
<p>优势 : 不会其他盒子的布局 , 也可以设置缩放的中心</p>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#aa</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">200px</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#0000FF</span>;</span><br><span class="line">    <span class="attribute">margin</span>: <span class="number">100px</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#aa</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="comment">/* 1,里面不写单位,数字就是缩放的倍数,1就是倍,2就是2倍 */</span></span><br><span class="line">    <span class="comment">/* 参数是2个,第一个控制的宽度,第二个控制高度 */</span></span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">2</span>,<span class="number">2</span>);</span><br><span class="line">    <span class="comment">/* 2,参数写一个就代表了修改宽高 */</span></span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">2</span>);</span><br><span class="line">    <span class="comment">/* 3,缩放:参数要是小数,数值小于1 */</span></span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(.<span class="number">5</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;aa&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span>我是一个span标签,在此用于测试<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021143020860.png" alt="image-20211021143020860">    鼠标经过后<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021143033755.png" alt="image-20211021143033755"></p>
<ul>
<li>图片缩小案例</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">280px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">377px</span>;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span> <span class="selector-tag">img</span> &#123;</span><br><span class="line">    <span class="attribute">transition</span>: all .<span class="number">5s</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">div</span> <span class="selector-tag">img</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(.<span class="number">95</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;//m.ykimg.com/</span></span></span><br><span class="line"><span class="string"><span class="tag">              0584000061502839202742090539A00B?</span></span></span><br><span class="line"><span class="string"><span class="tag">              x-oss-process=image/resize,w_290/</span></span></span><br><span class="line"><span class="string"><span class="tag">              interlace,1/quality,Q_80&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021145256615.png" alt="image-20211021145256615" style="zoom:50%;" />    



<h1 id="32-浏览器的私有前缀"><a href="#32-浏览器的私有前缀" class="headerlink" title="32, 浏览器的私有前缀"></a>32, 浏览器的私有前缀</h1><p>作用 : 为了兼容老版本浏览器的写法 , 比较新的浏览器不需要添加</p>
<ul>
<li>-moz- : 火狐浏览器的私有属性的前缀</li>
<li>-ms- : IE浏览器私有属性的前缀</li>
<li>-webkit- : 代表着 chrome , safari私有属性的前缀</li>
<li>-o- : 欧鹏浏览器的私有前缀</li>
</ul>
<h1 id="33-列表属性"><a href="#33-列表属性" class="headerlink" title="33, 列表属性"></a>33, 列表属性</h1><ul>
<li><p><strong>list-style-type : 设置列表表头标志样式</strong></p>
<p><strong>无序列表</strong></p>
<ul>
<li><strong>none</strong> : 没有样式</li>
<li><strong>disc</strong> : 实心点 (默认)</li>
<li><strong>circle</strong> : 空心点</li>
<li><strong>square</strong> : 小方块</li>
</ul>
<p><strong>有序列表</strong></p>
<ul>
<li><strong>decimal</strong> : 数字</li>
<li><strong>lower-roman</strong> : 小写罗马数字</li>
<li><strong>upper-roman</strong> : 大写罗马数字</li>
<li><strong>lower-alpha</strong> : 小写字母</li>
<li><strong>upper-alpha</strong> : 大写字母</li>
<li><strong>decimal-leading-zero</strong> : 01 , 02 , 03 , ….</li>
</ul>
</li>
</ul>
<ul>
<li><strong>list-style-position : 设置列表表头标志的位置</strong><ul>
<li><strong>inside</strong> : 设定标记在列表文字之内</li>
<li><strong>outside</strong> : 设定标记在列表文字之外</li>
</ul>
</li>
<li><strong>list-style-image</strong> : 设置列表表头图标<ul>
<li>url (图片地址)</li>
</ul>
</li>
</ul>
<blockquote>
<p>代码实例</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">ul</span> &#123;</span><br><span class="line">    <span class="attribute">list-style-type</span>: square;</span><br><span class="line">    <span class="attribute">list-style-position</span>: outside;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-tag">ol</span> &#123;</span><br><span class="line">    <span class="attribute">list-style-type</span>: decimal-leading-zero;</span><br><span class="line">    <span class="attribute">list-style-position</span>: inside;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.img</span> &#123;</span><br><span class="line">    <span class="attribute">list-style-image</span>: <span class="built_in">url</span>(<span class="string">img/dot.jpg</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">&quot;img&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第1个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第2个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第3个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第1个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第2个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第3个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第1个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第2个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>我是第3个li<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br></pre></td></tr></table></figure>

<img src= "https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/loading.gif" data-lazy-src="D:/blog/source/_posts/02-CSS.assets/image-20211021152640047.png" alt="image-20211021152640047" style="zoom:67%;border: solid" />    



</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">lee</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://blog.cai2.wang/2021/11/19/Done/css3/">http://blog.cai2.wang/2021/11/19/Done/css3/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://blog.cai2.wang" target="_blank">李世龙</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/css/">css</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_cloud_hosting_aodd.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><div class="post-reward"><div class="reward-button button--animated"><i class="fas fa-qrcode"></i> 打赏</div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/wechat.jpg" target="_blank"><img class="post-qr-code-img" src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/wechat.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/alipay.jpg" target="_blank"><img class="post-qr-code-img" src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/alipay.jpg" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2021/11/20/Done/jQuery/"><img class="prev-cover" src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_social_girl_562b.png" onerror="onerror=null;src='https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">jQuery</div></div></a></div><div class="next-post pull-right"><a href="/2021/11/16/Done/es6%E7%AC%94%E8%AE%B0/"><img class="next-cover" src="https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/undraw_In_progress_re_m1l6.png" onerror="onerror=null;src='https://cdn.jsdelivr.net/gh/Cai2w/cdn/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">es6</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#1-CSS-%E7%BD%91%E9%A1%B5%E7%9A%84%E7%BE%8E%E5%AE%B9%E5%B8%88"><span class="toc-number">1.</span> <span class="toc-text">1, CSS - 网页的美容师</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2-CSS%E8%AF%AD%E6%B3%95%E8%A7%84%E8%8C%83"><span class="toc-number">2.</span> <span class="toc-text">2, CSS语法规范</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-CSS%E5%86%99%E6%B3%95%E8%A7%84%E8%8C%83"><span class="toc-number">3.</span> <span class="toc-text">3, CSS写法规范</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#4-CSS-%E5%9F%BA%E6%9C%AC%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">4.</span> <span class="toc-text">4, CSS 基本选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#4-1-%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84%E5%88%86%E7%B1%BB"><span class="toc-number">4.1.</span> <span class="toc-text">4,1 选择器的分类</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-2-%E6%A0%87%E7%AD%BE%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">4.2.</span> <span class="toc-text">4,2 标签选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-3-%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">4.3.</span> <span class="toc-text">4,3 类选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-4-id%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">4.4.</span> <span class="toc-text">4,4 id选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-5-%E9%80%9A%E9%85%8D%E7%AC%A6-%E5%85%A8%E5%B1%80%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">4.5.</span> <span class="toc-text">4,5 通配符 &#x2F; 全局选择器</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#5-CSS%E5%AD%97%E4%BD%93%E7%9B%B8%E5%85%B3%E5%B1%9E%E6%80%A7"><span class="toc-number">5.</span> <span class="toc-text">5, CSS字体相关属性</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#5-1-%E6%96%87%E5%AD%97%E5%B1%9E%E6%80%A7%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">5.1.</span> <span class="toc-text">5,1 文字属性的使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-2-%E6%96%87%E5%AD%97%E5%B1%9E%E6%80%A7%E7%9A%84%E5%A4%8D%E5%90%88%E5%86%99%E6%B3%95"><span class="toc-number">5.2.</span> <span class="toc-text">5,2 文字属性的复合写法</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#6-CSS%E6%96%87%E6%9C%AC%E5%B1%9E%E6%80%A7"><span class="toc-number">6.</span> <span class="toc-text">6, CSS文本属性</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#6-1-%E6%96%87%E5%AD%97%E9%A2%9C%E8%89%B2"><span class="toc-number">6.1.</span> <span class="toc-text">6,1 文字颜色</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-2-%E6%96%87%E5%AD%97%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F"><span class="toc-number">6.2.</span> <span class="toc-text">6,2 文字对齐方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-3-%E8%A3%85%E9%A5%B0%E6%96%87%E6%9C%AC"><span class="toc-number">6.3.</span> <span class="toc-text">6,3 装饰文本</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-4-%E6%96%87%E6%9C%AC%E7%BC%A9%E8%BF%9B"><span class="toc-number">6.4.</span> <span class="toc-text">6,4 文本缩进</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-5-%E8%A1%8C%E9%97%B4%E8%B7%9D"><span class="toc-number">6.5.</span> <span class="toc-text">6,5 行间距</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#7-CSS%E7%9A%84%E5%BC%95%E5%85%A5%E6%96%B9%E5%BC%8F"><span class="toc-number">7.</span> <span class="toc-text">7, CSS的引入方式</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#7-1-%E8%A1%8C%E5%86%85%E6%A0%B7%E5%BC%8F-%E8%A1%8C%E5%86%85%E5%BC%95%E5%85%A5"><span class="toc-number">7.1.</span> <span class="toc-text">7,1 行内样式 , 行内引入</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-2-%E5%86%85%E9%83%A8%E6%A0%B7%E5%BC%8F-%E5%B5%8C%E5%85%A5%E5%BC%8F%E5%BC%95%E5%85%A5"><span class="toc-number">7.2.</span> <span class="toc-text">7,2 内部样式 , 嵌入式引入</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-3-%E5%A4%96%E9%83%A8%E6%A0%B7%E5%BC%8F-%E9%93%BE%E6%8E%A5%E5%BC%8F%E5%BC%95%E5%85%A5-%E5%A4%96%E9%93%BE%E5%BC%8F"><span class="toc-number">7.3.</span> <span class="toc-text">7,3 外部样式 , 链接式引入 , 外链式</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#8-Emmet-%E8%AF%AD%E6%B3%95"><span class="toc-number">8.</span> <span class="toc-text">8, Emmet 语法</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#8-1-%E5%BF%AB%E9%80%9F%E7%94%9F%E6%88%90-HTML-%E7%BB%93%E6%9E%84"><span class="toc-number">8.1.</span> <span class="toc-text">8,1 快速生成 HTML 结构</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#8-2-%E5%BF%AB%E9%80%9F%E7%94%9F%E6%88%90-CSS-%E4%BB%A3%E7%A0%81"><span class="toc-number">8.2.</span> <span class="toc-text">8,2 快速生成 CSS 代码</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#9-CSS%E5%A4%8D%E5%90%88%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">9.</span> <span class="toc-text">9, CSS复合选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#9-1-%E5%90%8E%E4%BB%A3%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">9.1.</span> <span class="toc-text">9,1 后代元素选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-2-%E5%AD%90%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">9.2.</span> <span class="toc-text">9,2 子元素选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-3-%E5%B9%B6%E9%9B%86%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">9.3.</span> <span class="toc-text">9,3 并集选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#9-4-%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">9.4.</span> <span class="toc-text">9,4 伪类选择器</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#10-%E5%85%83%E7%B4%A0%E7%9A%84%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F"><span class="toc-number">10.</span> <span class="toc-text">10, 元素的显示模式</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#10-1-%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0"><span class="toc-number">10.1.</span> <span class="toc-text">10,1 块级元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-2-%E5%86%85%E8%81%94%E5%85%83%E7%B4%A0-%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0"><span class="toc-number">10.2.</span> <span class="toc-text">10,2 内联元素, 行内元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-3-%E8%A1%8C%E5%86%85%E5%9D%97%E5%85%83%E7%B4%A0"><span class="toc-number">10.3.</span> <span class="toc-text">10,3 行内块元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#10-4-%E5%85%83%E7%B4%A0%E6%98%BE%E7%A4%BA%E6%A8%A1%E5%BC%8F%E8%A3%85%E6%8D%A2"><span class="toc-number">10.4.</span> <span class="toc-text">10,4 元素显示模式装换</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#11-CSS%E8%83%8C%E6%99%AF"><span class="toc-number">11.</span> <span class="toc-text">11, CSS背景</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#11-1-%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2"><span class="toc-number">11.1.</span> <span class="toc-text">11,1 背景颜色</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-2-%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87"><span class="toc-number">11.2.</span> <span class="toc-text">11,2 背景图片</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-3-%E8%83%8C%E6%99%AF%E5%B9%B3%E9%93%BA"><span class="toc-number">11.3.</span> <span class="toc-text">11,3 背景平铺</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-4-%E8%83%8C%E6%99%AF%E7%9A%84%E5%A4%A7%E5%B0%8F"><span class="toc-number">11.4.</span> <span class="toc-text">11,4 背景的大小</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-5-%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87%E7%9A%84%E4%BD%8D%E7%BD%AE"><span class="toc-number">11.5.</span> <span class="toc-text">11,5 背景图片的位置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-6-%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87%E6%98%AF%E5%90%A6%E5%9B%BA%E5%AE%9A-%E8%83%8C%E6%99%AF%E9%99%84%E7%9D%80"><span class="toc-number">11.6.</span> <span class="toc-text">11,6 背景图片是否固定 (背景附着)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-7-%E8%83%8C%E6%99%AF%E5%A4%8D%E5%90%88%E5%B1%9E%E6%80%A7"><span class="toc-number">11.7.</span> <span class="toc-text">11,7 背景复合属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#11-8-%E8%83%8C%E6%99%AF%E8%89%B2%E5%8D%8A%E9%80%8F%E6%98%8E"><span class="toc-number">11.8.</span> <span class="toc-text">11,8 背景色半透明</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#12-CSS%E4%B8%89%E5%A4%A7%E7%89%B9%E6%80%A7"><span class="toc-number">12.</span> <span class="toc-text">12, CSS三大特性</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#12-1-%E5%B1%82%E5%8F%A0%E6%80%A7"><span class="toc-number">12.1.</span> <span class="toc-text">12,1 层叠性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-2-%E7%BB%A7%E6%89%BF%E6%80%A7"><span class="toc-number">12.2.</span> <span class="toc-text">12,2 继承性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#12-3-%E4%BC%98%E5%85%88%E7%BA%A7"><span class="toc-number">12.3.</span> <span class="toc-text">12,3 优先级</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#13-%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B"><span class="toc-number">13.</span> <span class="toc-text">13, 盒子模型</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#13-1-%E8%BE%B9%E6%A1%86-border"><span class="toc-number">13.1.</span> <span class="toc-text">13,1 边框 (border)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-2-%E5%86%85%E8%BE%B9%E8%B7%9D"><span class="toc-number">13.2.</span> <span class="toc-text">13,2 内边距</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-3-%E5%A4%96%E8%BE%B9%E8%B7%9D"><span class="toc-number">13.3.</span> <span class="toc-text">13,3 外边距</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#13-4-%E5%A4%96%E8%BE%B9%E8%B7%9D%E7%9A%84%E5%90%88%E5%B9%B6%E9%97%AE%E9%A2%98"><span class="toc-number">13.4.</span> <span class="toc-text">13,4 外边距的合并问题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#13-4-1-%E5%A4%96%E8%BE%B9%E8%B7%9D%E7%9A%84%E5%9E%82%E7%9B%B4%E5%90%88%E5%B9%B6-%E5%B9%B6%E5%88%97%E5%85%B3%E7%B3%BB"><span class="toc-number">13.4.1.</span> <span class="toc-text">13,4,1 外边距的垂直合并 (并列关系)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#13-4-2-%E5%B5%8C%E5%A5%97%E5%9D%97%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%A1%8C%E9%99%B7"><span class="toc-number">13.4.2.</span> <span class="toc-text">13,4,2 嵌套块元素垂直外边距塌陷</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#14-%E5%9C%86%E8%A7%92%E8%BE%B9%E6%A1%86-%E9%87%8D%E7%82%B9"><span class="toc-number">14.</span> <span class="toc-text">14, 圆角边框 (重点)</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#15-%E7%9B%92%E5%AD%90%E9%98%B4%E5%BD%B1"><span class="toc-number">15.</span> <span class="toc-text">15, 盒子阴影</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#16-%E6%96%87%E5%AD%97%E9%98%B4%E5%BD%B1"><span class="toc-number">16.</span> <span class="toc-text">16, 文字阴影</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#17-CSS%E6%B5%AE%E5%8A%A8-float"><span class="toc-number">17.</span> <span class="toc-text">17, CSS浮动 (float)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#17-1-%E7%BD%91%E9%A1%B5%E4%B8%89%E7%A7%8D%E5%B8%83%E5%B1%80%E6%96%B9%E5%BC%8F"><span class="toc-number">17.1.</span> <span class="toc-text">17,1 网页三种布局方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-2-%E6%A0%87%E5%87%86%E6%B5%81"><span class="toc-number">17.2.</span> <span class="toc-text">17,2 标准流</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-3-%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%BD%9C%E7%94%A8"><span class="toc-number">17.3.</span> <span class="toc-text">17,3 浮动的作用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-4-%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%84%8F%E4%B9%89"><span class="toc-number">17.4.</span> <span class="toc-text">17,4 浮动的意义</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-5-%E6%B5%AE%E5%8A%A8%E7%9A%84%E7%89%B9%E6%80%A7"><span class="toc-number">17.5.</span> <span class="toc-text">17,5 浮动的特性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-6-%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80%E7%9A%84%E6%B3%A8%E6%84%8F%E7%82%B9"><span class="toc-number">17.6.</span> <span class="toc-text">17,6 浮动布局的注意点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#17-7-%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8"><span class="toc-number">17.7.</span> <span class="toc-text">17,7 清除浮动</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#18-CSS-%E5%AE%9A%E4%BD%8D"><span class="toc-number">18.</span> <span class="toc-text">18, CSS 定位</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#18-1-%E5%AE%9A%E4%BD%8D%E7%9A%84%E7%BB%84%E6%88%90"><span class="toc-number">18.1.</span> <span class="toc-text">18,1 定位的组成</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-2-%E5%AE%9A%E4%BD%8D%E6%A8%A1%E5%BC%8F"><span class="toc-number">18.2.</span> <span class="toc-text">18,2 定位模式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-3-%E8%BE%B9%E5%81%8F%E7%A7%BB"><span class="toc-number">18.3.</span> <span class="toc-text">18,3 边偏移</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-4-%E9%9D%99%E6%80%81%E5%AE%9A%E4%BD%8D"><span class="toc-number">18.4.</span> <span class="toc-text">18,4 静态定位</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-5-%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E9%87%8D%E7%82%B9"><span class="toc-number">18.5.</span> <span class="toc-text">18,5 相对定位 ( 重点 )</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-6-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D"><span class="toc-number">18.6.</span> <span class="toc-text">18,6 绝对定位</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-7-%E5%AD%90%E7%BB%9D%E7%88%B6%E7%9B%B8"><span class="toc-number">18.7.</span> <span class="toc-text">18,7 子绝父相</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-8-%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D"><span class="toc-number">18.8.</span> <span class="toc-text">18,8 固定定位</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-9-%E7%B2%98%E6%80%A7%E5%AE%9A%E4%BD%8D"><span class="toc-number">18.9.</span> <span class="toc-text">18,9 粘性定位</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#18-10-%E5%AE%9A%E4%BD%8D%E7%9A%84%E5%8F%A0%E6%94%BE%E6%AC%A1%E5%BA%8F"><span class="toc-number">18.10.</span> <span class="toc-text">18,10 定位的叠放次序</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#19-%E5%AE%9A%E4%BD%8D%E7%9A%84%E6%89%A9%E5%B1%95"><span class="toc-number">19.</span> <span class="toc-text">19, 定位的扩展</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#20-%E5%85%83%E7%B4%A0%E7%9A%84%E6%98%BE%E7%A4%BA%E5%92%8C%E9%9A%90%E8%97%8F"><span class="toc-number">20.</span> <span class="toc-text">20, 元素的显示和隐藏</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#20-1-display"><span class="toc-number">20.1.</span> <span class="toc-text">20,1 display</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-2-visibility"><span class="toc-number">20.2.</span> <span class="toc-text">20,2 visibility</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#20-3-overflow"><span class="toc-number">20.3.</span> <span class="toc-text">20,3 overflow</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#21-%E7%B2%BE%E7%81%B5%E5%9B%BE"><span class="toc-number">21.</span> <span class="toc-text">21, 精灵图</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#21-1-%E4%B8%BA%E4%BB%80%E4%B9%88%E4%BD%BF%E7%94%A8%E7%B2%BE%E7%81%B5%E5%9B%BE"><span class="toc-number">21.1.</span> <span class="toc-text">21,1 为什么使用精灵图</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#22-%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87"><span class="toc-number">22.</span> <span class="toc-text">22, 字体图标</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#22-1-%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%E7%9A%84%E4%BA%A7%E7%94%9F"><span class="toc-number">22.1.</span> <span class="toc-text">22,1 字体图标的产生</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-2-%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%E7%9A%84%E4%BC%98%E5%8A%BF"><span class="toc-number">22.2.</span> <span class="toc-text">22,2 字体图标的优势</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-3-%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%E7%9A%84%E4%B8%8B%E8%BD%BD"><span class="toc-number">22.3.</span> <span class="toc-text">22,3 字体图标的下载</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-4-%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%E7%9A%84%E5%BC%95%E5%85%A5"><span class="toc-number">22.4.</span> <span class="toc-text">22,4 字体图标的引入</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#22-5-%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87%E8%BF%BD%E5%8A%A0"><span class="toc-number">22.5.</span> <span class="toc-text">22,5 字体图标追加</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#23-CSS%E4%B8%89%E8%A7%92"><span class="toc-number">23.</span> <span class="toc-text">23, CSS三角</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#24-CSS%E7%94%A8%E6%88%B7%E5%B1%9E%E6%80%A7"><span class="toc-number">24.</span> <span class="toc-text">24, CSS用户属性</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#25-vertical-align"><span class="toc-number">25.</span> <span class="toc-text">25, vertical-align</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#25-1-vertical-align%E4%BD%BF%E7%94%A8"><span class="toc-number">25.1.</span> <span class="toc-text">25,1 vertical-align使用</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#26-%E5%A4%9A%E5%87%BA%E6%96%87%E6%9C%AC%E7%9C%81%E7%95%A5%E5%8F%B7%E6%98%BE%E7%A4%BA"><span class="toc-number">26.</span> <span class="toc-text">26, 多出文本省略号显示</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#26-1-%E5%8D%95%E8%A1%8C%E6%96%87%E5%AD%97%E7%9C%81%E7%95%A5%E5%8F%B7"><span class="toc-number">26.1.</span> <span class="toc-text">26,1 单行文字省略号</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#26-2-%E5%A4%9A%E8%A1%8C%E6%96%87%E5%AD%97%E7%9C%81%E7%95%A5%E5%8F%B7"><span class="toc-number">26.2.</span> <span class="toc-text">26,2 多行文字省略号</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#27-CSS-3"><span class="toc-number">27.</span> <span class="toc-text">27, CSS 3</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#28-CSS3%E6%96%B0%E5%A2%9E%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">28.</span> <span class="toc-text">28, CSS3新增选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#28-1-%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">28.1.</span> <span class="toc-text">28,1 属性选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-2-%E4%BC%AA%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8-%E9%87%8D%E7%82%B9"><span class="toc-number">28.2.</span> <span class="toc-text">28,2 伪元素选择器 (&#x3D;&#x3D;重点&#x3D;&#x3D;)</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#28-3-%E7%BB%93%E6%9E%84%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">28.3.</span> <span class="toc-text">28,3 结构伪类选择器</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#29-CSS3%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B"><span class="toc-number">29.</span> <span class="toc-text">29, CSS3盒子模型</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#30-CSS3%E8%BF%87%E6%B8%A1-%E9%87%8D%E7%82%B9"><span class="toc-number">30.</span> <span class="toc-text">30, CSS3过渡 (&#x3D;&#x3D;重点&#x3D;&#x3D;)</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#31-CSS-2D%E8%BD%AC%E6%8D%A2"><span class="toc-number">31.</span> <span class="toc-text">31, CSS 2D转换</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#31-1-%E7%A7%BB%E5%8A%A8-translate"><span class="toc-number">31.1.</span> <span class="toc-text">31,1 移动 translate</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#31-2-%E6%97%8B%E8%BD%AC-rotate"><span class="toc-number">31.2.</span> <span class="toc-text">31,2 旋转 rotate</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#31-3-%E7%BC%A9%E6%94%BE-scale"><span class="toc-number">31.3.</span> <span class="toc-text">31,3 缩放 scale</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#32-%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E7%A7%81%E6%9C%89%E5%89%8D%E7%BC%80"><span class="toc-number">32.</span> <span class="toc-text">32, 浏览器的私有前缀</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#33-%E5%88%97%E8%A1%A8%E5%B1%9E%E6%80%A7"><span class="toc-number">33.</span> <span class="toc-text">33, 列表属性</span></a></li></ol></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2021 - 2022 By lee</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text">这是footer</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (true){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>if (document.getElementsByClassName('mermaid').length) {
  if (window.mermaidJsLoad) mermaid.init()
  else {
    getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(() => {
      window.mermaidJsLoad = true
      mermaid.initialize({
        theme: 'default',
      })
      true && mermaid.init()
    })
  }
}</script></div><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = false;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js" async="async" mobile="false"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = [
  'title',
  '#config-diff',
  '#body-wrap',
  '#rightside-config-hide',
  '#rightside-config-show',
  '.js-pjax'
]

if (false) {
  pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
}

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener scroll 
  window.removeEventListener('scroll', window.tocScrollFn)
  window.removeEventListener('scroll', scrollCollect)

  typeof preloader === 'object' && preloader.initLoading()
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // Analytics
  if (false) {
    MtaH5.pgv()
  }

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()

  typeof preloader === 'object' && preloader.endLoading()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>